Line below menu not showing

webadmin_vedanta · August 7

Hi,

We have selected "Line below Menu" style under the Betheme options (see screenshot) but the line does not appear. We recently upgraded Betheme from a very old version (12.x) to the latest version and the line stopped showing. A black line used to appear below the menu item under which the current page belonged. Please suggest a fix for this.

Link to our website: https://vedanta.org

Thanks so much!

Phil · August 8

Hi,

Please uncheck this option and see if the line appears then:

Best regards

webadmin_vedanta · August 12

Hi Phil,

Thanks for your suggestion. Yes, the line appears after unchecking the arrows option, but the arrows disappear. We would like to have both the line and the arrows. It used to work with the older Betheme version so maybe something can be fixed in the new version to make it work again. Please let me know if there is a quick code patch I can apply at my end while I wait for an updated version with the fix.

Thank you!

Phil · August 12

Try the following CSS code:

#Top_bar .menu > .menu-item-has-children > a:not(.menu-toggle)::before {
 content: "";
 height: 4px;
 width: 100%;
 position: absolute;
 left: 0;
 bottom: 0px;
 z-index: 203;
 opacity: 0;
 background-color: #444;
}
#Top_bar .menu > .menu-item-has-children:hover > a:not(.menu-toggle)::before{
 opacity: 1!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

webadmin_vedanta · August 12

I tried adding the custom CSS you suggested but it didn't work. The line just shows for a brief moment and then disappears, with or without the custom CSS. We have some of our own custom CSS so I tried removing all of our CSS but it still didn't work.

Phil · August 13

I do not see the code I have sent you in your website source.

If you removed it, please leave it be, so I can check what is wrong.

Also if you have any sort of cache, please purge it after insertign the code into your theme options.

Best regards

webadmin_vedanta · August 13

Sure, I added it again. Please check now.

Phil · August 14

What do you mean that it does not work?

It is right there:

Best regards

webadmin_vedanta · August 14

The line only shows when you hover over a menu item but if you browse to another page within the menu (let's say "Classes" in the screenshot you shared), the line under "Activities" does not continue to show. It used to show persistently in the older theme version giving a clear indication that the user is on a page under that particular menu. It was an experience similar to the mobile menu where the corresponding menu item color changes to white when browsing to a page under that menu. Hope that clarifies.

Phil · August 15

Please replace the second part of the CSS I sent you with the following one:

#Top_bar .menu > .menu-item-has-children:hover > a:not(.menu-toggle)::before,
#Top_bar .menu > .current-menu-ancestor > a:not(.menu-toggle)::before{
 opacity: 1 !important;
}

Best regards

webadmin_vedanta · August 15

Great, that worked. Thanks so much Phil!

Line below menu not showing

Comments