Jump to content


Photo
- - - - -

Main Navbar Customization Working With Firebug


  • Please log in to reply
16 replies to this topic

#1 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 19 June 2012 - 09:33 PM

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

Please Login or Register to see this Hidden Content

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 June 2012 - 10:21 PM

The thin line below which seems to be grey should be removed by adding this to your custom code:

Please Login or Register to see this Hidden Content

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.

#3 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 19 June 2012 - 10:54 PM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 20 June 2012 - 02:52 AM

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

Please Login or Register to see this Hidden Content



#5 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 20 June 2012 - 03:08 AM

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

#6 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 20 June 2012 - 06:03 AM

Catrina,

I managed to get my navigation fixed after the 2.2 framework upgrade and added the following in custom coce

Please Login or Register to see this Hidden Content


I still can not get rid of that hover box #F7F7F7

Thank you - chules

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 17015 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 June 2012 - 08:26 AM

Hi Chules,

Try adding this and let me know if that works.

Please Login or Register to see this Hidden Content



#8 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 24 June 2012 - 03:00 PM

Danny, I made this change. You can see the effect on my site at

Please Login or Register to see this Hidden Content

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

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 June 2012 - 03:44 PM

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?

#10 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 24 June 2012 - 04:05 PM

I am using firefox on a mac

#11 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 June 2012 - 04:11 PM

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:

Please Login or Register to see this Hidden Content



#12 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 24 June 2012 - 04:19 PM

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

#13 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 June 2012 - 04:27 PM

This isn't the most elegant solution, but it works:

Please Login or Register to see this Hidden Content



#14 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 24 June 2012 - 04:33 PM

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

#15 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 June 2012 - 04:38 PM

It worked when I tried it, but try this instead:

Please Login or Register to see this Hidden Content



#16 chules

chules

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 24 June 2012 - 04:42 PM

That was it! Thank You Chules

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 June 2012 - 04:50 PM

Do you need assistance with anything else?