Show menu color for page shown


#1

In NewsAnchor, it currently shows HOME as a blue menu item, regardless of the page being displayed. Is it possible to have the menu show the preset color from the Customization for the page being displayed?

For example, when the HOME page is displayed, the home entry on the menu would show the primary color.

When the page for the next menu item is displayed, the menu item shows that color, as configured in the Customizer.

Very simple: show the color in the menu, based on the page being displayed.

Thank you.


#2

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba


#3

Thank you, Csaba. I have not yet published the site, but your NewsAnchor demo acts exactly how I’ve described it:

http://demo.athemes.com/newsanchor/

The blue Home button is persistent. Would rather see the color follow the page being displayed.

Thank you.


#4

Hi,

Ok, now I understand what do you mean , but unfortunately that’s not possible by default, but if you have a few pages 4-5, then I can give you a Custom CSS to make the current menu items the colors of the hover, but please upload your site to a live server, because I will need to access your website to give you a working solution for that, because the code must include the ID of your pages and the ID of your Menu items.

Kind Regards,
Csaba


#5

Outstanding! Thank you. I will post the link here when we’re live in a few weeks.

Best regards.


#6

Hi,

Ok, please post here the link when your website is live and make sure to keep the website’s menu the same way you will have it in future, because the Custom CSS I can give you will work with that specific menu items, if you add new menu items or change them, then they may not work

Kind Regards,
Csaba


#7

Thank you, Csaba. We have launched our site. Here’s the link:

https://www.thewholecarenetwork.com

It would be great to have the CSS to make the menu options the color of the page being displayed.

Thank you for your assistance!

Dave


#8

Hi,

You can have the current menu item highlighted with blue instead of the Home ( first menu item ) with this Custom CSS:

.home #mainnav > ul > li:first-of-type {
    background-color: #16a1e7 !important;
}

#mainnav > ul > li:first-of-type {
    background-color: transparent !important;
}

.current-menu-item {
    background-color: #16a1e7 !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba


#9

Thank you, Csaba. I appreciate your response, but my request was actually a bit different than this. I was hoping to not have the current menu item as a standard blue, but instead, to have it pick up the color from the Customizer. Please see attached screen grab.

Since the colors are meant to be an identity for that topic, it would make sense to display the Customizer color for that page (instead of a standard blue.)

Thank you again.

Dave


#10

Hi,

Unfortunately that’s not possible, because the colors you apply there are made to be the menu hover colors, you can’t set those to the current menu item for what I gave you the Custom CSS.

Kind Regards,
Csaba


#11

As in this case, to change the header menu color, do the following: After Install Site Shows in Text Mode or Says There is No Stylesheet


24*7 Assignment help in Australia