Jump to content
Sign in to follow this  
Keith Vaugh

Colour of navigation menu

Recommended Posts

Keith Vaugh

Hi Folks How can I change the colour of the navigation menu? I tried adding the code below from another thread, but no luck (replacing the transparent with the colour) ul#menu-main-nav li#menu-item li.menu-item {background-color: transparent;}

Share this post


Link to post
Share on other sites
cmunns

Try targeting the a element not the li

Share this post


Link to post
Share on other sites
Keith Vaugh

I'm not sure what you mean (sorry not a programmer). I tried changing the li to a but that didn't sort it. Can you provide some more guidance.

Share this post


Link to post
Share on other sites
ruthtoledoaltschuler

Hi Keith, While I am also not a programmer, I found this on the forum that really helped me. You will have to substitute the colors in each case for the color you want. For the time being I will make it all white. I placed this in the Custom Code area and chose colors for each element according the what I wanted: #primary-nav .texture { background-color: #ffffff; color: #ffffff!important; } #primary-nav .sf-menu li { background-color: #ffffff; border-color: #DDDDDD; } #primary-nav .sf-menu li a { color: #ffffff; } #primary-nav .sf-menu li a:hover { background-color: #ffffff; color: #ffffff;} #primary-nav .sf-menu .current_page_item a { background-color: #ffffff; color: #ffffff !important; } #primary-nav .sf-menu .current_page_item a:hover { color: #ffffff !important; } To get the color codes you will have to use Photoshop, or Photoshop elements, or some other program that allows you to use a color picker and gives you the number for that specific color. Then you cut and paste the number where ffffff is. Hope this helps as it has helped me.

Share this post


Link to post
Share on other sites
joie

Here's what is working for my site at www.gspreschool.net It is using custom menu, renaming the menu text at wordpress so that all main menu will fit into 1 line It is using 1 side-bar page layout Hope it will work out for you ul.sf-menu li ul.sub-menu li.menu-item a{ /*color the sub menu item when not selected */ background-color: #50C8F4; /* blue */ } ul.sf-menu li.current-menu-item a, /* color when the top menu without submenu is selected and */ ul.sf-menu li ul.sub-menu li.current-menu-item a, /* color the submenu when the submenu is selected */ ul.sf-menu li.current-menu-item a.sf-with-ul, /* color when the top menu with submenu is selected */ ul.sf-menu li.current_page_parent a.sf-with-ul, /* color the top menu with a submenu when a submenu item is selected */ ul.sf-menu li ul.sub-menu li.menu-item a:hover, /* color the top menu without a submenu when a submenu item is selected */ ul.sf-menu li.menu-item a:hover{ /* color when any menu item top or submenu is hovered */ background-color: #14C297; /* green */ } ul.sf-menu li.current_page_parent a.sf-with-ul, /* round corners on parent item when submenu is selected */ ul.sf-menu li.current-menu-item a.sf-with-ul, /* round corners on parent item when parent itself is selected */ ul.sf-menu li.current-menu-item a, /* round corners on any menu item parent and submenu */ ul.sf-menu li.menu-item a:hover { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } ul.sf-menu li ul.sub-menu li.current-menu-item a, /* we dont want to round the corners for the selected sub menu */ ul.sf-menu li ul.sub-menu li.menu-item a{ /* we dont want to round the corners for submenu item when hovered */ border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; height: auto; /* so that the sub menu text wont colapse */ } .menu-item { /* color the any menu item when it is not selected */ background-color: transparent !important; /* important is needed otherwise it become white */ } li.menu-item a{ color: #FFFFFF !important; /* color the font to white */ text-transform: lowercase !important; font-size: 15px !important; /* text-shadow: 0.1em 0.1em 0.1em black; */ } #nav_row.main_nav { /* remove the white navigation bar border*/ border:0px; }

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  

×