How can I make the menu to wrap when I resize my browser?


Tags: html,css,menu,wrapping,floating

Problem :

I kept searching on the Internet, but the only thing I get is how to avoid/prevent the div elements on wrapping/floating when resizing the browser. My problem is exactly the opposite: I have an horizontal menu and I'm trying to wrap down the elements (eg. Home, Contact etc.) once the browser is shrinking and then, to return to its initial state when the browser is maximized. Here is the HTML document:

<div id="menu">
<ul>
<li><a href="#index">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

And the CSS is something like this:

     #menu
          {border:1px;
           height: 40px;
           width: 400px;
           clear: both;
           float: left;
           position:relative;
           top:20px;}
     #menu ul
           {list-style-type:none;
            margin:0;
            padding:0;
            overflow:hidden;}
     #menu li
           {float:left;}
     #menu a:link,a:visited
           {display:block;
            width:100px;
            font-weight:bold;
            text-align:center;}

I tried to change the height and width to auto, remove/shift the clear, float, overflow and position tag, I even changed the float:left in "#menu li", to float:none, but then the menu elements get fixed one after another and it stays that way, even if I resize the browser. I also, divided each of the menu elements with div (is not in the code below), but without any succes. Do I have to change the CSS code entirely or to do this with js, jquery etc.? If so, how?



Solution :

DEMO

This can be achieved simply by removing the fixed height widths.

Elements with unspecified widths are set to width:auto which is usually the size of the elements contents. Floated elements will wrap if they cannot fit on the page adjacently.

CSS

#menu{
    border:1px;
    clear: both;
    /*height: 40px; Remove*/
    /*width: 400px; Remove*/
    float: left;
    position:relative;
    top:20px;
    background:#58c;
}
#menu ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
#menu li{
    float:left;
}
#menu a:link,a:visited{
    display:block;
    width:100px;
    font-weight:bold;
    text-align:center;
}

    CSS Howto..

    How to change background-color of selected option in IE11?

    CSS how to have two divs to the right of one div but not beside each other

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    CSS How to align two DIVs on the same line without using floats

    How to make box light up in navigation bar - CSS

    On css: if text line is break show dots

    Rails - how to build a grid-like list of product page

    How does one know exact pixel size / relationships between CSS elements?

    How to remove whitespace that appears after relative positioning an element with CSS

    How to create text block over the images with css and make it responsive

    How to create javascript or css fadeInDown on mouseover?

    How to adapt a flex div's width to content

    How can I get my menu/logo to be centered instead of all the way to the right?

    How to make fixed navbar top like w3school

    How to convert columns to rows using CSS

    How to use GitHub's primer and octicons?

    How to put a div in center of browser using CSS?

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    how to style margins between items in a
    list?

    How to convert table with merged cells to responsive design?

    How to set background-color on 50% of area CSS

    How can we wrap the line based on border size of windows browser?

    How to show parts of sprite with CSS keyframes to create animation?

    How to display form output in the same page by hiding the form

    How to not use absolute positioning CSS

    How to change class named active into link's active attribute in javascript

    How do I make the box smaller in html?

    How to make round circle links responsive in css?

    How to change the css color code permanent using php