All top nav items with dropdown show as active on front page

[Freelancealot]

Hi,

I recently made some changes to the site and now the front page is showing all items with a dropdown on the top bar navigation as active. On all the other pages, posts, the navigation is showing correctly.

I have reloaded the main WP-Forge functions.php --- so that's clean, and I've also reloaded the front-page template in WP-Forge. I did that in case the files had been corrupted in some way or had changed something by accident.

I'm only making changes to the child theme files. The files I've recently been editing are header.php, footer.php, front-page.php, content-footer.php, functions.php, and style.css. I can't see anything that would cause this issue in the navigation.

Can you think of any reason why this is happening? The site is www.lepharebleu .com

BTW I see the theme has been approved; excellent news, congratulations!

Would I be able to update WP-Forge now? Will it still work with the pre-approved Starter child theme? [I would do it on a test installation of course but would like to know if it's possible before I go ahead]

One other issue, while I'm talking top-bar navigation: I see on the new WP-Forge demo that the off-canvas menu has dropdown items hidden (ie you click to reveal the sub menu items), but on the Starter child theme, sub-pages appear as one long list. How do I get the off-canvas menu to work like the WP Forge demo one?

Thanks for your help,

Tracy

[tsquez]

Hi Tracy,

Event though the theme has been approved, it still needs to be reviewed by one of the theme review team admins, just in case anything was missed by the people who reviewed my theme. Once the admin approves it then it will go live and then you should be able to update it and yes it will work with WP-Starter.

I do not know what you are referring to when you say

I see on the new WP-Forge demo that the off-canvas menu has dropdown items hidden (ie you click to reveal the sub menu items), but on the Starter child theme, sub-pages appear as one long list.

The off-canvas menu for the WP-Forge demo was not "turned on" until this morning after I read your issue on here. I do not know what browser you are using but I am using Chrome. On the WP-Forge demo I have Off-Canvas turned on, on the WP-Starter demo I do not have off-canvas turned on, the default behavior is on, so I do not know what you are talking about.

In regards to your issue, on line 52 of style.css you have this:

.top-bar-section ul li.active > a {
  background-color: #1475bb !important;
  color: #fff !important;
}

You have the background color set to #1475bb and set to !important so its over writing your styles, remove the background color and you will get rid of your color issue or at least I believe you will.

[Freelancealot]

Hi,

Thanks for getting back to me. Unfortunately, the CSS suggestion doesn't work.

.top-bar-section ul li.active > a { background-color: #1475bb !important; color: #fff !important; }

The ONLY page with the problem is the front page. Changing the css affects ALL the active classes on the whole site, not just the front page. And as the menu works on all the pages/posts then it's a problem specific to the front page.

When you look at the source code, all the dropdowns on the front page have the class 'active'. When you look at the other pages, posts, etc, only the page you're on has the class 'active' in the top bar nav. item ---- as it should be.

Can you think of anything that could be putting the 'active' class on ALL the dropdowns ONLY for the front-page?

With regard to the off-canvas. I mean the new demo's you've put up. Sorry, I didn't explain myself well.

Both new demos have the mobile (off-canvas) menu I want, ie a little arrow appears to denote there are sub-pages. Currently, the mobile menu on my version of WP-Forge, doesn't have those, it just lists all the pages including the sub-pages in one long list on the mobile menu. [I tried to attach a screenshot to this comment but it didn't work]. It should be obvious what I mean. You can see the different mobile menus at: http://themeawesome.com/themes/wpstarter/ (the one I want) and http://themeawesome.com/wordpress-child-theme/ (the one I have currently).

BTW I haven't done anything to the top-bar navigation files, the menu I'm using is the WP-forge walker. I've only changed the colours via CSS in the child theme.

Cheers, Tracy

[tsquez]

OK well you stated that you had made some changes. I don't know what changes you did but YOU DID something that is affecting the front page.

Now in regards to the menu, there are TWO different menus: the top-bar and off-canvas. The one located here http://themeawesome.com/themes/wpstarter/ is the default top-bar. Now the one that is located here http://themeawesome.com/wordpress-child-theme/ is called off-canvas. This is easily turned off by going into the cutomizer under menu and where it says use off-canvas for mobile view set it to no. Once you click save then the menu will display the way you want it to.

So without knowing exactly what you did I cannot determine what is causing the issue you are having on the front page, sorry.

[Freelancealot]

Hi,

Got you about the mobile menu; nice and easy :)

Regarding the menu dropdown. There must be a way of knowing where the process of adding the 'active' class to the menu takes place. I'm assuming that's where the problem is. In WP-Forge, where would that be? What php pages could affect that? The only thing I've noticed is that I gave the top-level of the menu dropdowns a # in the link to 'disable' them. So all the top-level links in the menu have a # link. When you click those links it should just keep you on the page you're on, but on the site when you click those # links they all take you to the front page. So, I'm wondering if that is what is causing something to add the 'active' class to all those # links on the Front page, because it thinks you're already on the page. Make sense?

Shouldn't the # disable the link rather than be redirecting to the front page?

That's as far as I can take the logic. I don't have enough knowledge of how the Wordpress and walkers work, and what process is causing this. I can't think what I could have done to make those # links do that---as far as I remember I have not changed anything on the walker. I was changing the footer menu, just removed the 'inline-list' class, and I did some stuff to the functions.php in the child theme to side some categories from the blog home page. None of these things should have affected the main menu.

I've posted on Wordpress.org forum in case it's a general Wordpress issue that someone else has come across before, but if you can think of anything, please let me know.

I'll be adding German and French language to the site over the next week. It's been a big project and I think the site is looking great, if I say so myself :) Š And I couldn't have done it without WP-Forge. So I'd really like to get this issue sorted before the site owners officially announce the launch of their new site.

Cheers, Tracy

[Freelancealot]

"OK well you stated that you had made some changes. I don't know what changes you did but YOU DID something that is affecting the front page."

Hi,

Still haven't figure out what I did to cause the issue. But I have found a solution to the problem. So I'm posting here just in case it's useful for anyone else.

As it appeared the # link in the 'disabled' top-level item on the dropdowns was causing the 'active' class to be created, I looked into the issue of disabling items on the Wordpress menu. One thread somewhere said to remove the # from the link once the Custom link has been added to the menu, so the field is blank. So that's what I did Š and it worked.

Happy times!

Cheers, Tracy

[tsquez]

Good glad you got it sorted out.