Highlight wrong menu item when active

  • Resolved Pixel_me

    (@pixel_me)


    9 years, 11 months ago

    Hello

    When I choose “Kalender” (=event calendar) in my menu, it highlights “Kalender” AND “Nieuws” (=news blog). Same as I click on an event.
    When I choose to view the calendar as a List, my menu item “Nieuws” is highlighted, and not “Kalender”. When I choose Month again, it still highlights “Nieuws”.

    Also, when the Month view is active, wasn’t there a “next month” (or something like this)? Because I can’t navigate to next months. I don’t remember if this was available before.

    But the highlights and wrong menu item are problems since I updated the calendar. Can somebody help me with this?

    My site where you can see the problem: https://www.jigosan.be/kalender/
    I’m using the Fruitful theme.

    https://www.ads-software.com/plugins/the-events-calendar/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter Pixel_me

    (@pixel_me)

    I’m having this exact same or very similar problem. If I select the ‘Calendar’ Nav item, then ‘News’ is active.

    https://earthshipseattle.org/calendar/

    My css looks like this:
    https://github.com/nategunn/itc210-earthship-seattle/blob/master/style.css#L330

    All the other nav items only require the css rule like this:
    #nav-main li.current_page_item a:

    The calendar does not adhere to that rule as far as I can tell.

    Any thoughts on the rule I should target?

    When I look at this in Firebug, it displays ‘News’ as the current_page_item when ‘Calendar’ actually is the selected nav item.

    Any input would be appreciated.

    Thank you,
    Troy

    Thread Starter Pixel_me

    (@pixel_me)

    Also, when the Month view is active, wasn’t there a “next month” (or something like this)? Because I can’t navigate to next months. I don’t remember if this was available before.

    This is back available on my site. But the wrong menu highlight is still a problem. Any help would be appreciated.

    I have not been able to resolve this highlighting issue yet either.

    The CSS has changed a bit. Here is where the ‘you are here’ selectors are currently on GitHub:

    https://github.com/nategunn/itc210-earthship-seattle/blob/master/style.css#L374

    The solution I found for this is to go into the WordPress dashboard, then Appearance > Menus. For the Calendar menu item, use the Custom option instead of putting a Page in your menu for Calendar. The custom option is labelled ‘Events,’ as opposed to ‘Pages’ or ‘Categories,’ etc. Select Events > View All > then check the ‘Events’ check box. Add that to your menu. Change the Navigation Label of this ‘Custom’ option to Calendar. Copy the location of your Calendar’s URL into the URL field. Save the Menu. From that point I was able to style a class called ‘current-menu-item.’ This solved the issue described earlier in this thread, but still have issues showing the ‘You Are Here’ state with child pages of News (such as single.php) with the selector ‘current_page_parent’ when using The Modern Tribe ‘The Events Calendar’ plugin.

    Hope that helps!

    https://github.com/nategunn/itc210-earthship-seattle/blob/master/style.css#L406

    Same thing for me. When I click to the “Calendar Page” menu, it activate the “Blog” menu and not the “Calendar Page” menu. I try with the default wordpress theme and it is the same issue (with no other plugins activated).

    How can I fix the behaviour ?

    Thanks.

    Brook

    (@brook-tribe)

    Howdy guys,

    Thanks for bearing with us over the holidays, a bit slower respones than usual and I am getting caught up on them.

    The problem here is it looks like your the blog section of your site is getting highlighted when you visit an archive. Your theme basically treats all archives, whether they are from custom post types or stock ones as children of the Blog. Thus your theme highlights the blog when you visit the calendar archive.

    You would need to either check with the theme author about a fix, or write some custom CSS to hide the effects. When you are visiting a TEC page the <body> tag will have some unique classes in it. For instance this demo calendar has the unique class .tribe-events-page-template : https://wpshindig.com/events/ So you can use that class to unhighlight any improperly highlighted nav items, and highlight the proper one if needed.

    There is a couple of options. I hope one of them works for y’all. Cheers!

    – Brook

    Thank you Brook!

    Resolved by targeting the body class .tribe-events-page-template of ‘The Events Calendar’ and changing the activated ‘You Are Here’ color of ‘News’ to the same color as the unactivated state when ‘Calendar’ is selected. This made it possible to show ‘News’ as activated on child pages of ‘News,’ such as when the user is on an archive page.

    .news was a class I added in through the WP dashboard on the ‘News’ menu item.

    https://github.com/nategunn/itc210-earthship-seattle/blob/master/style.css#L413

    https://earthshipseattle.org/calendar/

    -Troy

    Brook

    (@brook-tribe)

    Awesome, glad that worked Troy.

    – Brook

    After learning how to use CSS again, I was able to fix my Fruitful theme based website with this issue. Would appreciate a critique of my work since I am way rusty and definitely hacked my way through this.

    My site: SSTA

    Three things I should note:

    1) I had to make a custom link for the events (calendar) page on my website so that it would tag it with the current page css class.

    2) My nav tag did not have an id so I just used the <ul id=”main-menu-1″… for the hash tags.

    3) I used the block of code from Troy F (thanks!) and modified it to work with my website’s css:

    /* Bug: selects "News" when "Calendar" is selected */
#main-menu-1 li.current_page_parent a:visited {
  background-color:#81d742;
}
/* End - Bug: selects "News" when "Calendar" is selected */

/* Hack: selects backgrounnd color for "News" when "Calendar" is selected */
/* .tribe-events-page-template is on the body tag of The Events Calendar */
.tribe-events-page-template #main-menu-1 li.current_page_parent.news a {
color:#333;
}
.tribe-events-page-template #main-menu-1 li.current_page_parent.news a:visited {
  background-color:#ffffff;
}
.tribe-events-page-template #main-menu-1 li.current_page_parent.news a:hover {
color:#ffffff;
}
.tribe-events-page-template #main-menu-1 li.current_page_parent.news a:hover {
  background-color:#81d742;
}
/* End - Hack: selects backgrounnd color for "News" when "Calendar" is selected */

    Thanks a ton for the post and the help guys!
    -Morgan

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Highlight wrong menu item when active’ is closed to new replies.