WordPress.org

Ready to get started?Download WordPress

Forums

Esplanade
Nav menu color help (4 posts)

  1. jvalle
    Member
    Posted 2 years ago #

    Greetings,
    With the esplande theme, I'm attempting to modify the colors of the Navigation menu and can not seem to pin-point a couple of things. I am trying to change the background color of the selected page menu item, as well as the font color for the text in the drop down menu. I am confident the ids involved are as follows:

    #access a:hover,
    #access li.current_page_item > a {
    	background:#777;
    	background:-moz-linear-gradient(#777,#555);
    	background:-webkit-linear-gradient(#777,#555);
    	background:-o-linear-gradient(#777,#555);
    	background:-ms-linear-gradient(#777,#555);
    	background:linear-gradient(#777,#555);
    	color:#fff;
    	text-decoration:none;
    }
    
    #access li.current_page_item > a {
    	background:#222;
    	background:-moz-linear-gradient(#252525,#151515);
    	background:-webkit-linear-gradient(#252525,#151515);
    	background:-o-linear-gradient(#252525,#151515);
    	background:-ms-linear-gradient(#252525,#151515);
    	background:linear-gradient(#252525,#151515);
    }
    
    .drop-down-toggle {
    	position:absolute;
    	top:7px;
    	right:16px;
    	display:none;
    	width:20px;
    	height:20px;
    	border-radius:15px;
    	background:#333;
    	background:-moz-linear-gradient(#333,#444);
    	background:-webkit-linear-gradient(#333,#444);
    	background:-o-linear-gradient(#333,#444);
    	background:-ms-linear-gradient(#333,#444);
    	background:linear-gradient(#333,#444);
    	border:#aaa 3px solid;
    }

    Any help would be greatly appreciated.

    jv

    http://wordpress.org/extend/themes/esplanade/

  2. Daniel Tara
    Member
    Theme Author

    Posted 2 years ago #

    Background of the currently selected page is handled by the selector #access li.current_page_item > a

    Everything in the drop-down menu is handled by selectors #access li li or #access li ul

  3. Daniel Tara
    Member
    Theme Author

    Posted 2 years ago #

    See how it's done in the custom stylesheets in the /styles/ folder (e.g. earth.css), they do exactly what you're after.

  4. barbarbox
    Member
    Posted 2 years ago #

    Hello,
    I have successfully changed the color of the entire nav menu, but when I hoover over the top menu items, the blocks are still Esplanande-grey.

    I changed this code:

    #access a:hover,
    #access li.current_page_item > a {
    	background:#000000;
    	background:-moz-linear-gradient(#777,#555);
    	background:-webkit-linear-gradient(#777,#555);
    	background:-o-linear-gradient(#777,#555);
    	background:-ms-linear-gradient(#777,#555);
    	background:linear-gradient(#777,#555);
    	color:#ff0099;
    	text-decoration:none;
    }
    
    #access li.current_page_item > a {
    	background:#000000;
    	background:-moz-linear-gradient(#252525,#151515);
    	background:-webkit-linear-gradient(#252525,#151515);
    	background:-o-linear-gradient(#252525,#151515);
    	background:-ms-linear-gradient(#252525,#151515);
    	background:linear-gradient(#252525,#151515);
    }

    into this:

    #access a:hover,
    #access li.current_page_item > a {
    	background:#990099;
    	color:#ff0099;
    	text-decoration:none;
    }
    
    #access li.current_page_item > a {
    	background:#000000;
    }

    but nothing changed on the website.

    Can somebody help me get rid of the grey stuff in the navigation menu?

    Thanks in advance!

    Barbara

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic