Forums

matt_sanford

I am currently having an issue with my navigation bar. It changes positions at random when the page is refreshed. The nav is inside header . I can not figure out the problem. Here is the all the Code for the nav.


#list-nav {
padding: 10px 20px 20px 40px;
<!--==================problem===============-->
margin-left: -40px;
<!--==================problem===============-->
margin-top: -1px; 
display: inline-block;
position: absolute;
text-shadow: 0 4px 6px rgba(0,0,0,.4);

}

#list-nav a{
margin-right: 90px;
text-decoration: none;
color: black;
font-size: 22px;

}

#list-nav a:hover {
color: white;
}
a:nth-child(-n+3)
{
margin-right: 60px !important;
}

a:nth-child(3)
{
margin-right: 45px !important;
}

And here is the HTML



		<nav id="list-nav">
<a href="/" title="Home">Home</a>
<a href="/about.php" title="About">About</a>
<a href="/services.php" title="Services">Services</a>
    	    			<a href="/contact.php" title="Contact">Contact</a>
   		</nav>	 <!-- closing #list-nav-->

jurotek

Include the Header CSS and HTML. There's nothing going wrong with it after refresh by recreating from what you posted.

jurotek

Unless there's a need for negative margin to offset padding in the nav and all that important declaration in your layout cause I don't see rest of it, you could achieve same thing and have consistent spacing between anchors which is currently not the same. I could be wrong on this one, but there's no need for absolute position of nav if you don't intend to give values like Top, Right etc.


#list-nav {
margin-top: -1px;
padding: 10px 0 20px;
display: inline-block;
text-shadow: 0 4px 6px rgba(0,0,0,.4);
}
#list-nav a{
margin-right: 55px;
text-decoration: none;
color: black;
font-size: 22px;
}
#list-nav a:hover {
color: white;
}

matt_sanford

Header HTML


	<header id="header"> 
	   <div id="letuspray-logo">
        <div class="logo-bg"> </div>
	     <div class="logo-top"><a href="index.php">Let <span id="us">Us</span> Spray</a></div>
	     <div class="logo-bottom">
	       <span class="soft-wash">Soft Wash</span><div id="scripture"><span class="verse">Col 3:23</span></div></div> <!-- closing #logo-bottom --> </div> <!-- closing #letuspray-logo -->   	 
		<nav id="list-nav">	 
			
    	    			<a href="/" title="Home">Home</a>     	 
	  			<a href="/about.php" title="About">About</a>
    	   			<a href="/services.php" title="Services">Services</a>
    	    			<a href="/contact.php" title="Contact">Contact</a>
   		</nav>	 <!-- closing #list-nav-->
        <div id="praying-hands">
        </div>
	<div class="iframes "> <!--this will hold the Better Business Bureau's accredidation  (sp?) seal --> 
				<a href="http://www.facebook.com/letusspray&quot; target="blank" class="sb circle facebook">Facebook</a>
		</div> <!-- closing .iframes -->

		</header> <!-- closing header -->

Header CSS


#header {
height: 150px;
padding-top: 10px;
}

matt_sanford

thanks @jurotek. the problem was the negative margin.

changed the

margin-left: -40px;

to

margin-left: 20px;

the point of the negative margin was to align the anchors with parts of the background image but i then added the :nth-child selector to fix that but left the negative margin up by accident.

matt_sanford

Well it worked for a while but it is still falling underneath the logo. http://d.pr/i/mVY0 (how it is suppose to be) how it changes http://d.pr/i/bYK2 . I also just noticed that when the nav-bar moves it moves the facebook button as well.

treehouse : what would you like to learn today?

Forums

navigation bar problem