Dyad 2 – Formatting header menu text

  • waltwould · Member ·

    Hello,

    Hopefully this is an easier one for you CSS gurus! I would like to format the Header Menu text of my website (change font, color, font size, turn off text-transform, etc.).

    I’ve been able to change the font and font size by using the following example code:

    .primary-menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}

    However, I can’t seem to change the color or turn off the “text-transform” feature that renders the text in all-caps, even when using the !important tag. (I am very new at CSS, so this could easily be user coding error!) Could someone help me figure out how to do that?

    Also: Are there any other ways to format the menu text that I haven’t mentioned above? (E.g. is it possible to alter kerning via CSS?)

    Any assistance would be greatly appreciated. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • karenlattfield · Staff ·

    Hi waltwould,

    To turn off text-transform for the primary menu, you could try: 

    #site-navigation #primary-menu li {
text-transform: none;
}

    To change the colour of the site navigation: 

    #site-navigation #primary-menu li a {
color: #0000ff; //this is the hex code for blue as an example
}

    I believe the reason your CSS for text-transform wasn’t working was due to specificity (the CSS to change the text-transform was at the ‘li’ list tag level). At this level, you can change letter-spacing, padding, margin, font-size and much more. You could even set the background-color for each menu item, or add a border to each item. From what I understand, font kerning relates more to the spaces between letters (so perhaps letter-spacing may be more useful here). There is a font-kerning property in CSS3, though it appears it isn’t supported by all browsers.

    I hope this helps?

  • ravichahar · Member ·

    Hey waltwould,

    I don’t see any underline in main menu of the website you have listed here.

    Though you can change the font-size, color, by targetting this “#site-navigation a” in the CSS.

    #site-navigation a{
font-size: 1.5em;
color: #bf2020!important;
}

    Please change the values according to your requirements.

    And if you want the changes for any other website, please mention the link.

    Hope that helps.

  • waltwould · Member ·

    Thank you both so much! This is all very helpful.

    @karenlattfield, I especially appreciate the instructive comments, as I am (obviously!) still in the early stages of learning CSS. I understand how to use most of the commands you listed in your reply, except for setting a background color and/or border around each individual menu item. Could you please explain how I could do this? I do know how to find the ID of a specific menu item using my browser’s Element Inspector, but am not sure how to proceed beyond that. Thank you again for your help!

  • karenlattfield · Staff ·

    Hi waltwould,

    No problem, glad it helped :)

    If you wanted to set the background-color and border for each individual menu item, you could do this as follows (I’ve also added border-radius and padding as an example). 

    #site-navigation #primary-menu li {
background-color: #d3d3d3; // This is the hex code for light grey
border: 1px solid #000; // This will create a 1px solid black border
border-radius: 5px; // This will create a round edge to the border corners
padding: 10px; // This creates 10px of padding (on all sides of each list item) between the text and the border edge
}

    If you wanted to target just one single menu item with any of the above styles, you would write the CSS as follows (this example targets your ‘Search’ menu item): 

    #site-navigation #primary-menu #menu-item-162 {
Your CSS in here
}

    Have you checked out the WordPress.com CSS Basics guide? At the bottom are some links to some more tutorials and resources if you want to delve further into learning CSS: https://en.support.wordpress.com/custom-design/css-basics/

    I hope this helps.

  • The topic ‘Dyad 2 – Formatting header menu text’ is closed to new replies.