Jump to content

Blog On Navbar Is Highlighted When Another Navbar Item Is Selected

Recommended Posts



I am having this strange problem with the Navbar. I am using the Event Calendar plugin (By modern tribe) and Simple CSS Lite plugin. I did disabled all the other plugin's and switched to the Twenty Eleven theme to confirm that the event calendar was not causing this problem.

When the "upcoming events" or "Calendar" is selected it will also highlight the "blog" in the navbar, this does not happen when the other pages are selected. At first i was just using pages as the menu, thought i might have to create a menu to solve the problem, confirmed that did not work. I am guessing that this is cause there is some kind of walker filter on pagelines themes, but this is just a guess. If i select "Blog" it will not highlight the "Calendar" or "Upcoming events" .

The link of the site is http://tsttokyo.com.

Thank you

Share this post

Link to post
Share on other sites

Dave, I suspect that there's a CSS conflict somewhere. Did you add any custom CSS code? If so, was that validated?

In Firebug, I see lots of customizations that appear to include many classes. This is what's causing the red background:

#page .main-nav .current-menu-ancestor a, #page .main-nav li.current-menu-ancestor ul a, #page .main-nav li.current_page_item a, #page .main-nav li.current-menu-item a, #page .main-nav li.current_page_parent a, #page .sf-menu li li, #page .sf-menu li li li, #page .main-nav li:hover, #page .main-nav .current-page-ancestor a, #page .main-nav li.current-page-ancestor ul a {

    background: none repeat scroll 0 0 rgb(174, 9, 70);


I suspect that the reason is more likely the concept that the Blog is a special page and falls under one of the other elements cited above, where the event calendar is an equal.

You may be able to resolve this by adding a unique class to the Blog link in Appearance > Menus. Let me know what CSS you currently have added and if you've validated it.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites


I have only added the following CSS code in my " pagelines-customize" plugin.

.widget-title {



#morefoot .widget-title {






p {

text-align: justify;


.pprow {



/*.content .content-pad {

padding: 15px 15px 15px;


#site #page, #site #dynamic-content {

min-height: 300px;


.section-carousel .thecarousel {

background-color: #FFFFFF;

background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF);

background-repeat: repeat-x;

border: 1px solid #FFFFFF;

box-shadow: 1px 1px 0 #FFFFFF inset;

display: none;

overflow: hidden;

padding: 15px 67px;

position: relative;


I am wondering if Simple CSS Lite could be the cause of all the custom CSS code? Also, i am confused on what you mean by this "You may be able to resolve this by adding a unique class to the Blog link in Appearance Menus." I have entered in CSS Classes (optional) for Calendar, Upcoming Events, and Blog. It did not change anything. Could I have missed something?


Share this post

Link to post
Share on other sites

This issue is related to the Simple CSS lite plugin and this line in the CSS code:

#page .main-nav li.current_page_parent a,

Are any of these pages a child page of the other, or a parent page ?

If so, this is the cause of the issue. If no page is a parent or child page, then I recommend you contact the author of the simple lite plugin and inform them of the issue.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites
James B

You could try to use css to mask this effect on those pages only. I'm not sure if the below would work but try it. Replace x with the page id for the calendar page.

.page-id-x #menu-item-41 .main-nav li.current_page_parent a {background: black !important;}[/CODE]

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

The easiest way to do it would be to make those two items NOT be a child of the other item, then the CSS won't apply. Deselect "schedule" as the parent of those 2 pages and you should be okay.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.

    • PierreFF
      By PierreFF+
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated!