[Resolved] Menu Highlight Problem

[Ziad]

Hello,

Not sure if this is a GeneratePress theme problem:
I am using GeneratePress with the add-ons. My main menu consists of Pages and one Custom Link. Whenever I select the Custom Link menu item, it is (usually) highlighted (as expected), but the item to its right is also highlighted! It is also erratic in that sometimes when I select the Custom link, it doesn’t get highlighted at all. Is this a GeneratePress issue? Please advise. Thanks.

To see for yourself:
– Go to http://www.tlacnc.org
– Click on the “Events” menu item. This is the Custom link item. When you press it, the menu item to its right (“News”) will also be selected.
– You can try other combinations and you’ll see that the problem seems to reside in the Custom menu item

Thanks,

Ziad

[bdbrown]

Hi Ziad. Did you create a page for Events and add the custom link to the menu manually, pointing to that page? Or did you use the Events option in the menu items selection?

[Ziad]

I added the Custom Link to the menu manually (to a page created by “The Events Calendar” plug-in),

Ziad

[bdbrown]

I found a couple of reports online of the same behavior you are seeing. The Events menu link is somehow being seen by WP as a child of the blog page, which is what your News page is. One remedy was to remove the manually-created Custom Link (i.e., you selected “Custom Links” in the menu dropdowns, entered the URL and Link text) and replace it with the Events dropdown “Events” option, which basically creates the same type of Custom Link. Not sure why it would make a difference but one user said that fixed it. The other “fixes” involved css.

[Ziad]

Tried that, unfortunately same problem.
What are the css fixes?

Ziad

[bdbrown]

Give this css a try:

/* on Events-generated page reset News menu item */
body.tribe-events-style-theme .main-nav .current_page_parent > a {
    color: #fff !important;
    background-color: #004000 !important;
}
body.tribe-events-style-theme .main-nav .current_page_parent > a:hover {
    color: #000 !important;
    background-color: #fff !important;
}

Here’s a reference:
https://wordpress.org/support/topic/highlight-wrong-menu-item-when-active

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Ziad]

Excuse my ignorance bdbrown, but in which CSS do I add it?

Thanks,

Ziad

[bdbrown]

No problem. Several options for adding custom css described here:
Adding CSS: https://generatepress.com/knowledgebase/adding-css/

There is a link to the GP child theme on the Download line here:
https://generatepress.com/knowledgebase/child-theme-working/

[Ziad]

Thanks bdbrown, adding the code you sent me worked!
Interestingly, when I tried to do it using the Child theme (I downloaded the empty one provided by GP), when I activated the child theme it totally messed up my site! My home page’s header/background image’s size became much bigger and my widgets’ positions became all messed up.
I re-activated GP Premium and used option 2 (jetpack CSS edit),

Ziad

[bdbrown]

Glad the code worked for you. That’s a bit strange with the child theme. Just activating the blank child theme shouldn’t have any effect on your site. Did you make any other changes (activate/deactivate plugins, etc.) at the same time?

[Ziad]

None whatsoever!
As a clue maybe, the header background image became much longer, and a couple of widgets were displayed in it to the right,

Ziad

[bdbrown]

Yes, the widgets are “theme” specific because of the different sidebar/widget IDs assigned by individual themes. Since WP sees the child theme as a separate theme, you may need to adjust, or even re-add, the widgets. If the widgets that changed were in the header then their positioning may have affected the background image placement/size as well. My apologies for not catching that.

[Ziad]

I’ll give it another try, thanks!

Ziad

[Author]

Posts