Header Pro - underline hover gap

[vojtechzikmund]

Hello there,

how do I increase the gap between the menu item and the hover line? Also possible to add some simple animation to the hover effect?

I’ve addded the underline effect via code given on this forum:

$el.x-menu > li > .x-anchor:hover .x-anchor-text-primary {
  text-decoration: underline;
}

[ruenel]

Hello @vojtechzikmund,

Thanks for writing in!

To resolve your issue, please edit your page and adjust the bottom padding of the menu text.

Please let us know if this works out for you.

[vojtechzikmund]

I don’t think you understood me. What I’m trying to resolve is to increase the gap between underline and the menu text. The text margin just moved the whole menu text with underline included.

[nabeel]

Hey @vojtechzikmund,

Thank you for the clarification, to add a gap between menu item and the underline with animation just replace your code with the following:

$el.x-menu > li > .x-anchor .x-anchor-text-primary {
  transition: all 0.3s ease;
}

$el.x-menu > li > .x-anchor:hover .x-anchor-text-primary {
  text-decoration: none;
  border-bottom: 2px solid;
  padding-bottom: 10px;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[vojtechzikmund]

Thank you for updating the code. Although, possible to make it work without the bottom padding which moves the menu item up?

[ruenel]

Hello @vojtechzikmund,

Please update the code given by @Nabeel and use this:

$el.x-menu > li > .x-anchor .x-anchor-text-primary {
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
}

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

This code will give you underline menu item with enough gap. The animation is not possible . The example url is using a more custom design which requires more into custom development which is beyond the scope of our support.

Thank you for your understanding.

[vojtechzikmund]

Thank you! Works like a charm

[ruenel]

You are most welcome!