[Support request] Sub page not showing menu hover line

[Dave]

Hey guys, most of my pages are pages that are listed in the main horizontal navigation menu. When that page is active, the red border bottom shows below the specific page just like it does on mouse hover – like the page below for example:

https://igniswebdesign.com/pricing-and-plans/

However, on that page above when you click on “Select” to choose a plan, it takes you to a page that isn’t part of the main nav menu, hence the red border bottom isn’t there. Then when you hover over the menu items, it bumps the content down to add the red border bottom. See example:

https://igniswebdesign.com/task-force-web-design-package/

Is there a way to have the red border bottom show below the “Pricing” menu item without having it also add a drop down sub-menu below?

Thanks!

[Leo]

Hi Dave,

Try adding those pages as the sub menu items and add hide-on-desktop hide-on-tablet and hide-on-mobile classes to the Custom Classes field: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then remove drop down arrow: https://generatepress.com/forums/topic/arrow-on-menu-drop-downs/#post-172450

[Dave]

OK I did all of this but its still not showing up with the red border bottom

[Dave]

And even when I remove the CSS classes to test it, it shows in the drop down but when I click it, it still doesn’t show the red bottom

[Leo]

Maybe try this CSS for menu underline:

.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-bottom: 2px solid #fff;
}

[Dave]

Tried that but it puts a white line under the red line. Check it out:

Go to PRICING menu item and then click one of the packages.

[Leo]

Remove the CSS you have for the red line.

[Dave]

Awesome, that worked!

One last thing, the nav arrow is gone from desktop view but in the mobile slideout menu, its still showing. The submenu items aren’t, but the arrow is. How do I remove?

[Leo]

Try:

@media (max-width: 768px) {
    .slideout-mobile.dropdown-hover .slideout-navigation .dropdown-menu-toggle {
        display: none;
    }
}

[Dave]

Hey Leo, that CSS worked but I did have to use !important for it to work properly.

Thanks!

[Leo]

Awesome. No problem!

[Tom]

If you ever want to avoid !important, look for an ID (#) to use. IDs are seen as more important than classes.

[Dave]

Ok sounds good, thanks guys!

[Dave]

Hey guys – sorry to open an old topic, but I am having an issue. I added some new sub-pages and the issue I had above with the red line is happening. The pages above still work fine, but I duplicated them and added a maintenance plan section and pages and the red bar is not below the nav menu items on the new pages.

Works on this page (old page): https://igniswebdesign.com/pricing-and-plans/box-alarm-web-design-package/

Doesn’t work on this page (new page): https://igniswebdesign.com/pricing-and-plans/tier-1-maintenance-plan/

I’m combing the CSS and can’t figure out why its applying to the old pages but not the new ones which were duplicated.

[Author]

Posts