• Resolved charlesdunworth

    (@charlesdunworth)


    WP version 3.6, events calendar 3.03, thematic child theme

    I’m trying to style my navigation bar to indicate which page a user is on. I’ve done it by applying style to .sf-menu .current_page_item in the css.

    However the style won’t apply to the page generated by the events calendar plugin (the slug for which I have as ‘events’). I notice when I inspect using firebug that the .current_page_item is not being applied to the <li> class.

    Any idea how this could be solved or any css workaround for the problem. I’m not an experienced php programmer but I would give any suggestions a go. A css workaround would be fine. Does this post even make sense to anyone? Has anyone solved this problem?

    http://wordpress.org/plugins/the-events-calendar/

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi Charles,

    Have you tried applying a rule against .current-menu-item instead and can you share a link to your site?

    Thanks!

    Thread Starter charlesdunworth

    (@charlesdunworth)

    Thank you very much for replying Barry.

    The style as applied is already covering both those bases, in the css I have…

    .sf-menu .current-menu-item,
    .sf-menu .current-menu-parent,
    .sf-menu .current-menu-ancestor,
    .sf-menu .current-post-ancestor,
    .sf-menu .current_page_item,
    .sf-menu .current_page_ancestor,
    .sf-menu .current_page_parent {
    
    	background: #fff;
    }

    it styles all the other links bar the events page fine. I can’t link to the site because as yet it is only being developed locally.

    When I look at the html whilst I am on, say, the gallery page, it appears thus…

    <ul class="sf-menu sf-js-enabled">
    <li>
    <li class="page_item page-item-92">
    <li class="page_item page-item-22">
    <li class="page_item page-item-11 current_page_item">
       <a href="http://localhost/barsite/gallery/">Gallery</a>
    </li>
    <li class="page_item page-item-8">
    <li class="page_item page-item-24">
    <li class="page_item page-item-13">
    </ul>

    …but when I am on the events page that current_page_item does not appear in the class…

    <ul class="sf-menu sf-js-enabled">
    <li>
    <li class="page_item page-item-92">
      <a href="http://localhost/barsite/events/">Events</a>
    </li>
    <li class="page_item page-item-22">
    <li class="page_item page-item-11">
    <li class="page_item page-item-8">
    <li class="page_item page-item-24">
    <li class="page_item page-item-13">
    </ul>

    There is really nothing there I can hook onto is there? I’m sort of guessing that without seeing the site you are going to struggle to take this issue any further but I’ve replied anyway just in case.

    Big thanks for your time

    For whatever reason it would appear not. Yet with most themes there is no problem (try this with Twenty Twelve or Twenty Thirteen for instance). Perhaps there’s something unusual in the way your theme/parent theme generates the menus?

    I’m having the same issue… the page that is set as the main events page isn’t applying current_page_item – there’s nothing to grab onto…

    http://thecartelstudio.com/classes-gatherings/

    Does this only happen with your theme? Or are you using some sort of menu plugin?

    no menu plugin…

    OK, and so is it specific to your theme as best you can tell?

    negative. i’ve just tested it with WordPress 2013 default theme and still doesn’t have current_page_item

    class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-1552″

    Strange, for me (although I don’t see that exact class) the Events item is correctly highlighted both with Twenty Twelve and Twenty Thirteen and the containing list item has the class .current-menu-item applied.

    Something different is clearly happening in your case, I’m not sure at this point what that would be. I know you tried taking things back to a default theme, but did you also disable all other plugins?

    I didn’t disable other plugins… I’ll try that next. thx.

    Great!

    I realize this is a few months old, but I thought this might be helpful for anyone else experiencing this problem.

    My Settings

    • My Events URL slug for The Events Calendar was set to calendar.
    • I also had a WordPress Page titled “Calendar” with the slug calendar.
    • I use WordPress’ default Menus manager to create and display my Primary Navigation. In my menu structure, I added the WordPress Page “Calendar.”

    My Expectation

    • When a user goes to The Events Calendar’s main page and event subpages, the “Calendar” link in the primary navigation highlights to signify active page/section.

    The Problem

    • The “Calendar” link never highlighted. WordPress failed to add an active class (.current_page_item) to the “Calendar” menu item when I was on The Event Calendar’s main page.
    • This was true regardless of the theme I was using.

    The Fix

    • Delete the WordPress Page titled “Calendar” with the slug calendar.
    • Delete the WordPress Page “Calendar” from the menu structure.
    • Add a link with The Events Calendar’s main page URL (<home_url>/calendar in my case) to the menu structure.

    From here, WordPress should start adding the active class to The Event Calendar’s main page and event subpages.

    Plugin Contributor leahkoerper

    (@leahkoerper)

    Thanks phonecalls!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘styling 'events' in navigation bar problem’ is closed to new replies.