CODEWITHSUNDEEP
csshtmlnavigationbar
FINDarkside
FINDarkside

Reputation: 2435

Navigation bar collapsing when shrinking window

First off here is the code:

#menu {
    padding:0;
    margin-top:0px;
    position:absolute;
    top:0px;
    width:100%;
    float:left;
    overflow:hidden;



}


#menu li {
    list-style:none;
    float: left;
    position: relative; 
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border:1px solid black; 
    background-image: linear-gradient(#F2FF00, #AEFF00);
    margin-left:10px;
}



#menu a {
    display:block;
    padding:auto;
    text-align:center;
    padding:10px 10px;


    color: #0095FF;
    text-transform: uppercase;
    font: bold 25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 1px 1px 2px #0095FF;
}

The buttons moves down when I shrink the window. If can set the height to menu so it wont change, but still the buttons go outside of the menu element, why does this happen?

Here is jsFiddle:http://jsfiddle.net/nqdXc/

Upvotes: 1

Views: 3051

Answers (1)

lee_gladding
lee_gladding

Reputation: 1100

You have a width of 100% on the menu, and float left on the li's, if the menu can not fit the li's they will drop down. This is expected behaviour.

I am not sure the effect you are trying to achieve, but you can set a minimum width on the menu like so:

#menu {
    min-width: 360px;
}

If you let us know what the desired effect is, we might be able to help you further

Upvotes: 1

Related Questions