Tutorial :How to get horizontal menu to go to left when it's too big


I've got a horizontal menu on my website: http://www.alcmariavictrix.nl When i browse it in small browsers (IPhone), the horizontal menu on top is screwed. What i want to perform is get that horizontal menu to the left when the browser can't display it all in one line.

Does anyone know how to do this? example:

The right way http://www.alcmariavictrix.nl/images/right-way.png The right way to do it

The wrong way http://www.alcmariavictrix.nl/images/wrong-way.png This is the think i don't want

This should the wrong way be doing http://www.alcmariavictrix.nl/images/this-should-do.png This is how it should be done when it's wrong


This seems to achieve the desired effect for me (I don't have an iPhone, so I couldn't test in that environment):

#header {  background:transparent url(images/design/header_bg_home.png) no-repeat scroll right bottom;  clear:both;  height:325px;  width:960px;  position:relative; /* added */  }    #menu_horiz {  height:81px;  position:absolute; /* added */  right:24%;         /* added, tweak this value if needed */  /* removed:      float:left;     margin-left:206px;     width:542px; */  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »