Change Menu Font Styling On Posts & Projects

  • Hello,

    Because of the various content I place in the hero section of my Pages, Posts and Projects, I need to change the font color so it doesn’t blend in. I can do this on Pages by adding CSS and targeting the Page-ID. However, this process does not work for my Posts and Projects pages.

    When I inspect the same menu element on all three types of Pages, Posts and Projects, only on Pages do I see my code with the Page-ID called out, followed by my menu font styling. I don’t see the same code when I inspect the same menu element on Posts and Projects.

    I can clearly see Posts and Projects page IDs when I load the page. Why are Posts and Projects not taking the code like Pages do?

    Thanks,

    AJ

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • I can clearly see Posts and Projects page IDs when I load the page. Why are Posts and Projects not taking the code like Pages do?

    You already answered your question in the 1st paragraph. Since you target using page-id, it only affects that page-id only.

    On top of that, there is also the Specificity of selector involved too.
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Try this code in Additional CSS section, it will make nav menu link in project page become black.

    
/* default is white, make it black */
.project-template-default  #top-menu-nav .menu-item a {color: black;}
    Thread Starter ajamesiv

    (@ajamesiv)

    Paul,

    What I’m saying is that using the page id works for Pages only. The default menu font color for my site is white. But I some pages it needs to be black. So I get those page IDs and copy/paste the code then update the page ID number.

    But for Projects, trying to target its page id doesn’t work.

    I tried your code in various parts but it not having an affect.

    Thanks,

    AJ

    The code works, put it in Additional CSS (under Appearance). Try clearing browser cache, sometimes browser still displays cached version. Some web hostings also have server side caching mechanism going on without users knowledge, just so you know.

    The project is a custom post content type, so it uses postid-xx in <body> class.

    
<body class="project-template-default single single-project postid-437">

    So if you want to use id, just use .postid-437

    Thread Starter ajamesiv

    (@ajamesiv)

    Thank you. Looking into this shortly.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change Menu Font Styling On Posts & Projects’ is closed to new replies.