Archived topic

Sub page not showing menu hover line

13 replies · Started by Dave on July 18, 2017

Viewing posts 1–14 of 14

July 18, 2017 at 11:11 am #351292

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!

July 18, 2017 at 12:39 pm #351319

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

July 18, 2017 at 1:02 pm #351332

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

July 18, 2017 at 1:16 pm #351337

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

July 18, 2017 at 2:59 pm #351381

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;
}

July 18, 2017 at 3:33 pm #351389

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.

July 18, 2017 at 3:40 pm #351396

Remove the CSS you have for the red line.

July 18, 2017 at 5:36 pm #351414

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?

July 18, 2017 at 8:54 pm #351450

Try:

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

July 19, 2017 at 1:26 pm #351883

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

Thanks!

July 19, 2017 at 2:16 pm #351898

Awesome. No problem!

July 19, 2017 at 11:40 pm #352053

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

July 20, 2017 at 8:45 am #352283

Ok sounds good, thanks guys!

April 8, 2018 at 1:50 am #544282

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.

This archived topic is closed to new replies.

Start building better websites today.