Jump to content

Horizontal navigation issues


Recommended Posts

Hey, I posted this yesterday, but for some reason I do not see it today. I'm not sure what happened. Anyway, I have a horizontal navigation bar that I managed to find a solution to center it which is good. Unfortunately, I also need it to wrap to an additional line when on a smaller browser window, such as a smart phone. Currently the links that don't fit within the window just do not show up. Any ideas how to fix this? And if I am using a background image to create the buttons, is that going to effect things? I can probably just replace the image with a color.I currently have the naigational element inserted with a php include with a div id="mainNav"

<ul class="menu">  <li><a href="/index.php"  target="_self"><span>Home</span></a></li>  <li><a href="/career/index.php"><span>Career</span></a></li>  <li><a href="/portfolio/index.php"><span>Portfolio</span></a></li>  <li><a href="/fun/index.php"><span>Just For Fun</span></a></li>  <li><a href="/contact/index.php"><span>Contact</span></a></li></ul>

#mainNav {text-align: center;width: 100%;position: relative;overflow: hidden;background: url('/images/topMenuImages.png') repeat-x;}.menu {margin: 0;padding: 0;height: 30px;background: url('/images/topMenuImages.png') repeat-x;left: 50%;clear: left;float: left;position: relative;}.menu li {padding: 0;margin: 0;list-style: none;display: block;float: left;position: relative;right: 50%;}.menu li a {float: left;padding-left: 15px;display: block;color: rgb(255,255,255);text-decoration: none;font: 12px Verdana, Arial, Helvetica, sans-serif;cursor: pointer;background: url('/images/topMenuImages.png') 0px -30px no-repeat;}.menu li a span {line-height: 30px;float: left;display: block;padding-right: 15px;background: url('/images/topMenuImages.png') 100% -30px no-repeat;}.menu li a:hover {background-position: 0px -60px;color: rgb(255,255,255);}.menu li a:hover span {background-position: 100% -60px;}.menu li a.active, .menu li a.active:hover {line-height: 30px;font: 12px Verdana, Arial, Helvetica, sans-serif;background: url('/images/topMenuImages.png') 0px -90px no-repeat;color: rgb(255,255,255);}.menu li a.active span, .menu li a.active:hover span {background: url('/images/topMenuImages.png') 100% -90px no-repeat;}

Also, while I'm at it, what do I need to establish the "active" link

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...