1. stof
  2. Helix Ultimate
  3. Monday, 10 September 2018
Hi ,

I created a text-decoration ( underline ) for the active menu item in the megamenu.

However I can not get a distance beteween the line and the menu (word ) itself.

Tried many things ..

How can I achieve this?
Responses (4)
Accepted Answer Pending Moderation
This is not possible with an underline. You should use the border-bottom for the menu item instead of the underline for the text.
  1. more than a month ago
  2. Helix Ultimate
  3. # 1
Accepted Answer Pending Moderation
Thanks for your answer.
Ah okay I see .. But then the width is not exactly the same as the width of the menu item.. or can this be fixed?
  1. more than a month ago
  2. Helix Ultimate
  3. # 2
Accepted Answer Pending Moderation
In this case, you need to use the :: before pseudo-element to create a line from the bottom.
http://dl4.joxi.net/drive/2018/09/10/0008/0401/545169/69/67f2ff40d8.png
Using the "width" and "bottom" property values, you can adjust the width of the the line and distance beteween the line and the text of menu item.

.sp-megamenu-parent > li > a::before {
content: "";
background-color: #f34747;
width: 70%;
height: 2px;
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 14px;
margin: 0 auto;
opacity: 0;
}
.sp-megamenu-parent > li > a:hover::before {
opacity: 1;
}
  1. more than a month ago
  2. Helix Ultimate
  3. # 3
Accepted Answer Pending Moderation
Thanks! That looks like a good solution!
  1. more than a month ago
  2. Helix Ultimate
  3. # 4


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.