1 {{ upvoteCount | shortNum }}
1 {{ upvoteCount | shortNum }}

Thanks For The Help (And Another Request)

by jbearnolimits
1 replies
  • WEB DESIGN
    • |
Hey guys, I hate that I am having to ask for so much help on this site but I am very thankful that I have been able to get it here. I am very new to making mobile sites and css layouts. I was used to doing it the old way of tables and cut and paste images.

But I like to believe I have come a long way from that...at least I want to believe that.

Anyway, I am in need of another lesson or at least another pair of eyes that may catch a mistake I am making. I finally got the navigation the way I want it for mobile at screens of 400px or less. But now I am trying to get it for 401px and up.

This will be a different looking navigation bar altogether. But for some reason I can't seem to get it to even look like a navigation bar at all. Eventually I want a black background that has low opacity and fades out on the edges. But for now I would settle for just getting it to stack right and have a different color when I roll over the links.

What mistakes am I making here?

Code:
 #headerBigNav  { 
background-color: #E3481A;
width : 85%;  
padding-top: 5;
margin-top: 15px;
margin-bottom: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
} 
 #headerBigNav ul  { 
color: #ffffff;
display : block;
text-decoration: none;
list-style-type: none;
text-align: center;
width : 100%;
} 
 #headerBigNav ul li  { 
display : block;
width : 100%;
list-style : none;
} 
 #HeaderMobileNav ul li:hover  { 
background-color: #E7B09F;
} 
 #headerBigNav ul li a  { 
color: #ffffff;
display : block;
text-decoration: none;
width : 100%;
} 
 #headerBigNav ul li a:hover  { 
color: #ffffff;
display : block;
text-decoration: none;
width : 100%;
} 
 #headerBigNav ul li:hover ul  { 
display : block;
}
Again, thanks for the help. I am trying to learn.
#request
  • Profile picture of the author savidge4
    Originally Posted by jbearnolimits View Post

    Code:
     #headerBigNav  { 
background-color: #E3481A;
width : 85%;  <--- Space after element
padding-top: 5;
margin-top: 15px;
margin-bottom: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
} 
 #headerBigNav ul  { 
color: #ffffff;
display : block; <--- Space after element
text-decoration: none;
list-style-type: none;
text-align: center;
width : 100%; <--- Space after element
} 
 #headerBigNav ul li  { 
display : block; <--- Space after element
width : 100%; <--- Space after element
list-style : none; <--- Space after element
} 
 #HeaderMobileNav ul li:hover  { 
background-color: #E7B09F;
} 
 #headerBigNav ul li a  { 
color: #ffffff;
display : block; <--- Space after element
text-decoration: none;
width : 100%; <--- Space after element
} 
 #headerBigNav ul li a:hover  { 
color: #ffffff;
display : block; <--- Space after element
text-decoration: none;
width : 100%; <--- Space after element
} 
 #headerBigNav ul li:hover ul  { 
display : block; <--- Space after element
}

    with coding the devil is in the details. all of those spaces would be non working code.
    Signature
    Success is an ACT not an idea
    {{ DiscussionBoard.errors[9945306].message }}

Trending Topics