Active menu item underline

[vojtechzikmund]

Hi there,

I have created inline navigation for my one page website. I have also added a element css to add an underline for hover effect. What I would like to do is add this exact hover effect also for the active menu item when scrolling down the website. Now it is only highlighted without the underline.

[vojtechzikmund]

Could you also check why my menu doesn’t stay sticky no matter what I do? Also the navigation collapsed doesn’t open for no reason

[christopher]

Hi @vojtechzikmund,

Before delving into the menu details there are some Javascript errors happening with the Revolution Slider.

Would you please disable the Revolution Slider and then update the theme to version 3.0.3? The new version fixed a JS minifying problem that I guess is the problem cause.

After that, please enable the Revolution Slider and there should not be any error and the header Sicky feature should work ok.

Thank you.

[vojtechzikmund]

Thanks! Sticky menu and mobile menu works!

Now, how can I make the underline work too? I described the problem in my first post.

[friech]

Hi @vojtechzikmund,

@vojtechzikmund

What I would like to do is add this exact hover effect also for the active menu item

Please update your second block of custom CSS to this:

$el.x-menu > li > .x-anchor:hover .x-anchor-text-primary,
$el.x-menu .x-anchor.x-currently-active .x-anchor-text-primary {
text-decoration: none;
border-color: #cc184e;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[vojtechzikmund]

Thanks! Worked like a charm

Is there a way to make the Mobile menu work on one page with anchors? I tried making two different menus and other javascripts etc. what other tried here on forum, but just cannot get it working… what am I doing wrong?

[ruenel]

Hello @vojtechzikmund,

I can see that your mobile menu is using anchored links which will go the the sections when clicked. I think I am confused with this last request. Can you please clarify further? And by the way, if you want to have a custom menu header for mobile on a specific page, you can always do that by creating a custom header, adding your special menu and then assign that header to the specific page.

Best Regards.