Colour of parent page menu title when on a child page

  • Resolved jdancet

    (@jdancet)


    7 years, 3 months ago

    I am using the Penscratch 2 theme. When you visit a child page, the parent page menu title isn’t ‘green’ but stays grey. I would like to know if this can be changed by css customization.

    An example can be found here. When you hover over ‘About me’ you see there are a number of child pages. When you click on one of them, the parent page menu title isn’t green but grey – like all the other menu titles. So, the reader doesn’t know what section he is in.

    I am running a self-hosted site – not a wordpress.com site.

    • This topic was modified 7 years, 3 months ago by jdancet.
    • This topic was modified 7 years, 3 months ago by jdancet.
Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter jdancet

    (@jdancet)

    Nobody that can help? I tried the Max Mega plugin which replaces the original menu and that certainly is a solution on a desktop, but when I open the site on phone or tablet two (hamburger) menus are to be seen: the old one (unusable) and the new one.

    Thread Starter jdancet

    (@jdancet)

    Found the answer:

    .current-menu-parent a, .current-menu-ancestor a {

    color: #1c7c7c;

    }

    Thanks to: kries.at
    But this doesn’t work for the blog posts!

    Thread Starter jdancet

    (@jdancet)

    My starting page is the blog page, which I refer to in the menu by ‘News'(= Home). The color of this menu item is green (#1c7c7c) indicating correctly it is the active page. When you click on a blog post the home page isn’t ‘green’ like it should be (indicating the active page) but grey like all other items on the menu bar.

    Is it possible to change that using css?

    Moderator Kathryn Presner

    (@zoonini)

    @jdancet Could you provide a link to your site running Penscratch so I can take a look?

    Thread Starter jdancet

    (@jdancet)

    https://annvandessel.com
    The site is in Dutch.
    The Home Page is ‘Nieuws’.

    Moderator Kathryn Presner

    (@zoonini)

    You could target the “Nieuws” menu item to change its colour when you’re on a single post with:

    .single-post .menu-item-1942 a {
  color: #1c7c7c;
}

    Let me know how it goes.

    Thread Starter jdancet

    (@jdancet)

    Excellent! Thank you!
    It would make sense to have this as the standard option in this theme, wouldn’t it? Single page menu items turn green when that page is the active page and so does the homepage with the posts. But from the moment there is a child page is active the parent page isn’t highlighted. To do so one has to do some CSS-trick. And a hard to find one if one wants to do the same with blog posts.

    • This reply was modified 7 years, 3 months ago by jdancet.
    • This reply was modified 7 years, 3 months ago by jdancet.
    • This reply was modified 7 years, 3 months ago by jdancet.
    Moderator Kathryn Presner

    (@zoonini)

    You’re welcome! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

    Thread Starter jdancet

    (@jdancet)

    Excellent! Thank you very much!

    It would make sense to have this as the standard option in this theme, wouldn’t it? Single page menu items turn green when that page is the active page and so does the homepage with the posts. But from the moment a child page is active the parent page isn’t highlighted. To do so one has to perform some CSS-trick. And a very hard to find one if one wants to do the same with blog posts.

    • This reply was modified 7 years, 3 months ago by jdancet.
    Moderator Kathryn Presner

    (@zoonini)

    I hear what you’re saying, but it’s not possible, since there’s no connection between the custom link you created in your menu and your blog. As far as WordPress is concerned, that custom link could be to anywhere at all – there’s no way for your site to understand there’s a connection and to change its colour.

    Thread Starter jdancet

    (@jdancet)

    Your CSS was the one I needed. Thank you for your help!

    • This reply was modified 7 years, 3 months ago by jdancet.
    • This reply was modified 7 years, 3 months ago by jdancet.
    Thread Starter jdancet

    (@jdancet)

    For those interested …

    The code I finally use is:
    .current-menu-parent a, .current_menu_item a, .current-menu-ancestor a {
    ;color: #1c7c7c;
    }
    .single-post .menu-item-1942 a {
    color: #1c7c7c;
    }

    You only have to change the number in menu-item-1942 to use the same code for your own website.
    1942 is the unique code WordPress gives to your Homepage.
    You can find out the number by using the excellent plugin SiteOrigin CSS for instance or by using the inspector in Firefox.

    • This reply was modified 7 years, 3 months ago by jdancet. Reason: spelling
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Colour of parent page menu title when on a child page’ is closed to new replies.