• 0
Sign in to follow this  
Followers 0

.main_nav_container help, please

Question

Posted · Report post

Hello, This is my first post, so please let me know if I need to do anything differently for future ones! And, thanks in advance. Client link: http://www.outdoorartistryva.com I just purchased pagelines developer edt last night and was moving along pretty quickly until I ran into a snag with the navigation menu. Problem: I want to make the green background of the menu snap to the exact size of the hover background for each menu item (also make the entire menu thinner in general). In other words, when you hover over a menu item right now you see a grey box surrounding it. I'd like for the grey hover to blend in with the grey background of the site. I tried using: .main_nav_container { height 25; } (just an example #), but it only adjusts it from the bottom..I can't really think of a way to explain this better and can't think of an example off the top of my head. I searched the forums and only found things relating to changing the font size, not the actual dimensions of the menu container. Thanks!

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

I'm not a CSS expert, but I tested this using Firebug for Firefox (http://www.getfirebug.com): [code]#nav { background-color: #0A850A; height: 37px; }[/code] This puts the subnav exactly under the bottom edge of the green, which I couldn't seem to adjust either to lower the top margin. I see you seem to have resolved the grey box border around each submenu item.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

rangelone, thanks for the speedy reply! however, what I was going for was something to this effect: (edit: I clicked "reject" on your answer because it kept asking me to choose when I check the post! Sorry, I'm new here so no offense intended! I appreciate your attempt at helping me!) [img]http://www.outdoorartistryva.com/menu_example.jpg[/img] I threw it together quickly just to try and give you (and others) an idea of what I meant since the way I explained it wasn't very clear. I want to make the menu thinner all the way across and make the hover/active the same color as the #333333 background (I know they aren't the same color in the picture I edited :p) Thanks again!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No offense taken. I looked for the correct elements to shorten the space above the menu items. I couldn't find them. Again, CSS is not my specialty, but others among my colleagues are pretty good with it. I couldn't locate the elements to make the menu thinner on both top and bottom, only the bottom (which seemed so odd). Your explanation was fine. I'm just now calling in a colleague.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, this should take care of the top and bottom green edge: [code]#nav .content-pad, #secondnav .content-pad { padding-top: 0px; padding-bottom: 0px; }[/code] Your site had the top and bottom set to 5px, apparently. Let's see how this works for you before tackling the colors.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome - it worked! Thanks for your help (and that of your colleague!). I think I should be able to figure out the color issue..if not, at least I know there is a very helpful resource here on the forums! Thanks again. :)

Share this post


Link to post
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
Sign in to follow this  
Followers 0