navigation menu colors

  • Author
    Posts
  • #81713

    4 questions, all to do with navigation and links :)

    1) I’ve added some custom CSS to change the font-color and background-color in the drop-down menu. I did this via In Appearance > Customize > CSS using:

    #header .current-menu-item > a, #header .current-menu-ancestor > a, #header .current_page_item > a, #header .current_page_ancestor > a {
    	background: #fdf7b9 !important;
    }
    
    #header .sub-menu .current-menu-item > a, .current-menu-ancestor a {
    	color: #686868 !important;
    }

    The CSS seems to be sporadically applied. i.e. sometimes it works, sometimes it doesn’t. Am I missing something?

    2) I’d also like to change the color of the little triangle in the nav bar that indicates there’s a submenu, but cannot find the CSS ID/class name for it. Can you please tell me what that is?

    3) What is the CSS selector for the social menu links in the header? I’d like to change the background color of the little FAcebook icon to teal. It’s currently green.

    4) Fonts
    I used the Customizer to select a different title font (Museo Sans) which also only appears sporadically. :( At first you see the curly font of the Yumblog theme, then if you click Reload, you see the Museo Sans (sometimes). I’ve tested it on multiple gadgets and 2 other computers and several browsers.

    Pulling my hair out. Really hope you can help.

    The blog I need help with is chickadeemusic.ca.

    #81910

    michaelbeil
    Member

    Great questions!

    Let me see if I can answer them:

    1. From what I gather, you are wanting the current menu items to have a background of #686868 and a text color of #fdf7b9.

    #header .menu li.current-menu-item a {
        background-color: #fdf7b9;
    }
    
    #header .menu li.has-sub.current-menu-item ul a {
        color: #686868;
    }

    2. I think you are looking for the following:

    #header .menu li.has-sub > a:after {
        border-top-color: black;

    }`

    Where you can change the value of the border-top-color property to the color of your choice.

    3. You can use the following:

    #menu-social ul li a:before {
        color: teal;
    }

    4. I don’t see any issues here. Is there a particular page where it is happening?

    Let me know if that helps.

    #81935

    Thanks :) I figured out the social icon issue on my own. And the fonts seem to be more predictable now. Maybe it was a caching issue?

    For my question # 2, I found this variation worked better because I needed the tiny arrows to stay white when the background was blue, and only turn black when the background was yellow.:

    *#header .menu li.current-menu-item.has-sub > a:after
    {
    	border-top-color: #686868;
    	/*black nav arrow */
    }

    Still trying to work out how to get the text to be black only when the bg color is yellow.

    #81936

    Solved the black text issue!

    #header .sub-menu .current-menu-item > a,
    .current-menu-item.has-sub a
    {
    	color: #686868 !important;
    }

    #81938

    michaelbeil
    Member

    Great to hear!

    Let me know if you need anything more.

The topic ‘navigation menu colors’ is closed to new replies.