[Resolved] Customization Menu

[Alain León]

Hello. I would like the menu at the following example to the right of the header remain as the example below:
http://institutodebellezahiss.cl/
http://cssmenumaker.com/br/menu/flat-jquery-responsive-menu
I could help? I do not know how to do it.

[Tom]

Hi there,

You’re wanting the line to follow the hovered menu items?

This would require some custom javascript which is beyond the scope of this forum I’m afraid.

You should be able to find a lot of tutorials online though, which you could apply to your navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alain León]

What I would like would be to show the menu with no choice in the display property other than: Block. I wish that instead of just one indicator Block above the active page is displayed.

[Tom]

I’m not too sure what you mean – can you explain a little further?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alain León]

I would like to get something like this image.
https://www.dropbox.com/s/3rp8o0kfr5siojl/example1.jpg?dl=0

[Tom]

So you’re wanting a colored border above the menu item when it’s current/hovered?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alain León]

Yess!!!!!!

[bdbrown]

Hi Alain. This css should get you pretty close. Other than that you’d need some custom javascript which, as Tom indicated, is beyond the scope of the forum:

.main-navigation  {
      background: #fff;
}

.main-navigation .main-nav ul li a {
      color: #000;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a,
.main-navigation .main-nav ul li.current-menu-item a:hover {
      background: #fff;
      color: #009ae1;
      border-top: 3px solid #009ae1;
      margin-top: -3px;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Author]

Posts