Forums

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


<div id="menu-background">
		<div id="menu-wrapper" class="clearfix">
			<ul>
				<li><a class="current" href="#">home</a></li>
				<li><a href="#">sliders</a></li>
				<li><a href="#">shortcodes</a></li>
				<li><a href="#">blog</a></li>
				<li><a href="#">our works</a></li>
				<li><a href="#">contact us</a></li>
			</ul>
			
			<div id="search" class="right">
				<input type="text" placeholder="Search here">
			</div>
		</div><!--end div menu-wrapper-->
	</div><!--end div menu-background-->

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 1600x900 resolution. This also happens with 1600x1200 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

treehouse : what would you like to learn today?

Forums

Main navigation zoom out problem