• 0
Sign in to follow this  
Followers 0

Main Navbar Customization Working With Firebug

Question

Posted · Report post

I am working to create a certain look to my main menu and cant seem to find where to change the following. When I inspect the element and look at Firebug the Firebug result changes too fast for me to find out what to change. Here is a link to the site I am working on http://108.166.90.150/ I am trying to remove that thin white line below the navigation and to also remove the grey hover box that you see when you move across the menu. I want to remove the thin white line, remove the grey hover box and make the text hover blue as you move across the menu Thank you - chules

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

The thin line below which seems to be grey should be removed by adding this to your custom code: [code].navigation_wrap, ul.sf-menu ul li { border: medium none; }[/code] For the grey, I'd suggest you add the Simple CSS Lite plugin available in the Plugins section of the PageLines Store (Dashboard > PageLines > Store > Plugins). It will allow you to customize colors and background for all the menu items, including the hover and active states.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rangelone, the custom code worked to remove the bar and I installed Simple CSS Lite. I do see the option to set "background color of menu items on hover" however in my case I wish to have no color or translucent and can not seem to find how to set that in Simple CSS. Thank you for the assistance - chules

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To set your hover background color to none, you can use this CSS attribute for the selector [b].navigation_wrap, ul.sf-menu ul li a:hover[/b]: [code]background-color: none;[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I just upgraded the pagelines framework to the latest release. It has some nice additions for menus but I basically blew up everything I have been working on

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Catrina, I managed to get my navigation fixed after the 2.2 framework upgrade and added the following in custom coce [code].navigation_wrap, ul.sf-menu ul li a:hover { background-color: none; } [/code] I still can not get rid of that hover box #F7F7F7 Thank you - chules

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Chules, Try adding this and let me know if that works. [code].main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background: transparent !important; } .main-nav li a:hover, .main-nav .current-page-ancestor .current_page_item a, .main-nav li.current-page-ancestor ul a:hover { background-color: transparent !important; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny, I made this change. You can see the effect on my site at http://108.166.90.150/. What this did was remove the grey background on hover but somehow replaced that with the green color that I have set as the Background Color of Active Menu Item using Simple CSS light. What I am trying to do is remove the background color on hover altogether and just make the hover turn the menu link blue as it is doing now. When you click the actual menu item it then turns Green. Thank you for your assistance - chules

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When I view your navigation menu on Firefox for Mac, the colors are working as they should be (there is no hover background color, etc.). What browser are you using?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am using firefox on a mac

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Interesting... I think that since the menu items use "current_page_item" (or something similar) as a selector for currently selected menu items, that selector should be used in the CSS instead of trying to use the "a:active" link attribute. For example, if you want a link to change color when it's selected in the menu, you'd use CSS like this: [code]li.current_page_item a {color: #XXXXXX;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Catrina, thank you for your assistance. I've tried everything with this so I'll keep it as is and move on. Do you know how I can right justify the menu items. I wish the "Contact Us" link to start at the far right. If I fix this I maybe able to get away with the hover issue. Thank you - chules

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This isn't the most elegant solution, but it works: [code]ul#menu-primary ul.main-nav {margin-left: 380px;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Catrina, Could there be some problem with my site and custom css. When I make these changes in the back end of the site they do not seem to work. I just made the change above to move the menu items to the right and see no difference. Thank you - chules

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It worked when I tried it, but try this instead: [code]ul.main-nav {margin-left: 380px !important;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That was it! Thank You Chules

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Do you need assistance with anything else?

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