Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
Please how do I make a main menu item indicate the current page background colour (Orange) when I click a side bar link within the main menu item page?
I have a menu item called ‘About PetroSai’. The page has a side bar which links to other pages, for example ‘Our Mission’ and ‘Our Team’.
I want my website visitors to always keep track of where they are. So, I want ‘About PetroSai’ to have the current page font and background colours both at the main menu and footer menu when any of the side bar pages (‘Our Vision’ for example) is active.
My other question is how do I format the side bar items on the ‘About PetroSai’ page, i.e. font size, colour, bold, italics, etc?
Just to add that I have found a solution to my second question regarding formatting the side bar menu, like font color, bold, italics etc.
However my first question is still unresolved. I know that there is a solution if I add the sidebar menu pages to main menu ‘About PetroSai’ as drop down menu. However, I don’t want a drop down menu. I just want to link the sidebar to the main menu, such that if I click for example ‘Our Vision’, it will indicate ‘About PetroSai’ in the main menu and footer as the current item.
Hi Okeyossai
There isn’t an automated way to do this. I’ve written up the Custom CSS. Try the following at Appearance > Custom CSS:
.page-id-24 .main-navigation ul li.menu-item-17 > a, .page-id-21 .main-navigation ul li.menu-item-17 > a, .page-id-26 .main-navigation ul li.menu-item-17 > a, .page-id-28 .main-navigation ul li.menu-item-17 > a, .page-id-186 .main-navigation ul li.menu-item-17 > a { background-color: #da4b18 }Many thanks Andrew it worked perfectly for the header.
However, if I want the About PetroSai at the footer to show current page orange color when any of the sidebar pages is active, what should I do?
I tried updating your code with
.widget_nav_menu ul li.current_page_parent > a {
color: #da4b18
}
but it did not work.
The reason all this is required is that the menu’s aren’t aware of each other. So only the menu being clicked on will add the current_page class.
Try the following:
.page-id-24 .site-footer .menu li.menu-item-54 > a, .page-id-21 .site-footer .menu li.menu-item-54 > a, .page-id-26 .site-footer .menu li.menu-item-54 > a, .page-id-28 .site-footer .menu li.menu-item-54 > a, .page-id-186 .site-footer .menu li.menu-item-54 > a { color: #da4b18; }Thanks Andrew but it didn’t work. Is this related to how I created my footer with many custom widgets?
I suspect the reason may be due to that the fact that I’m using individual custom menu widget for each footer item. I went this route because I wanted the footer items to be horizontal but when I add all the items into one custom footer menu, they become vertically stacked on each other in the footer layout.
On a second look I don’t believe it is due to several custom footer menu widgets because the other main navigation menu items show the current page color on the footer when active.
Try this rather:
.page-id-24 .site-footer .menu li.menu-item-54 > a, .page-id-21 .site-footer .menu li.menu-item-54 > a, .page-id-26 .site-footer .menu li.menu-item-54 > a, .page-id-28 .site-footer .menu li.menu-item-54 > a, .page-id-186 .site-footer .menu li.menu-item-54 > a { color: #da4b18 !important; }It worked like a charm.
Thanks Andrew for your help.
For sure :) Glad to hear that did the trick.