Main navigation zoom out problem

[vhinmanansala]

Hi, Im having trouble with my main navigation because when Im zooming out my browser (Ctrl -), the last link in my main menu shifts to the next line. Is there any way on how to prevent this?

here is the html code

home


sliders


shortcodes


blog


our works


contact us

and the css:

/*main menu section*/

#menu-background{

background: #02487b; /*for fallback*/

background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.10) , rgba(0, 0, 0, 0.10));

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.10)), to(rgba(0,0,0,.10)));

background-image: -o-linear-gradient(rgba(255,255,255,.10),rgba(0,0,0,.10));

width:100%;

}



#menu-wrapper{

width:940px;

padding: 0 10px;

margin: 0 auto;

}

#menu-wrapper ul li{

float:left;

padding:15px 0;

}



#menu-wrapper a{

color:#fff;

text-decoration: none;

text-transform: capitalize;

padding:14px;



-moz-transition-duration:1s;

-webkit-transition-duration:1s;

-0-transition-duration:1s;

}



#menu-wrapper a:hover, .current{

background: #02487b; /*for fallback*/

background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.25) , rgba(0, 0, 0, 0.25));

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.10)), to(rgba(0,0,0,.10)));

background-image: -o-linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10));

}

[Paulie_D]

A link would be better.

Is this happening in all browsers or just some? What OS? What resolution or viewport size?

These sorts of issues are usually padding issues + font-sizes which can be addressed via media queries.

[vhinmanansala]

Thanks for quick response Paulie. It happens to all browsers and am using windows 7 with 1600×900 resolution. This also happens with 1600×1200 resolution. For the viewport, I haven’t declared anything to it and using screen for media. I am an amateur web designer so Im having trouble with it :)

[Paulie_D]

Like I said, do you have a link because there is insufficient information in your code for us to judge?

Have you played with the padding on your menu wrapper, list items, (li) or menu links (li a), font-sizes etc?

As I said, with a live link we can inspect it and let you know.

In any case, I think I would be correct in saying that the VAST majority of users don’t Ctrl- very often, it’s more likely to be the opposite.

Oh…and it might be your search box too!

[vhinmanansala]

here is one of my project which the last link also shifts to next line when zoomed out Strikewing

[Paulie_D]

Wow, I had to Ctrl- a whole heck of a lot to get that menu to break, so much that I couldn’t read any of the text…so it’s not a huge issue I suspect.

Regardless, I’m fairly confident that it’s the padding in your

ul.menu li a {

.I assume that the left and right padding is set so as to centre the text and stretch the list items so that they fill the width of the nav.

You could set the text to align center and set the li to a % to achieve the same effect…I think.

However, my original comment still applies… “In any case, I think I would be correct in saying that the VAST majority of users don’t Ctrl- very often, it’s more likely to be the opposite.”

[vhinmanansala]

Thanks paulie, it’s just that zooming out browsers to check my layout became my habit :-P

[Author]

Posts