Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Shorten Elementor menu underline on hover / selection

I am I would like to shorten the “underline” in the Elementor header menu of my WordPress website: Shortening of header underline – screenshot

I used this code to achieve this (I copied it from somewhere else):

.

elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after
{ 
    width: 70%; 
    right: 0; 
    margin: 0 auto; 
}

Question 1:
Is there a neater / better way to achieve what I want?

Question 2:
If I completely remove “.elementor-widget-nav-menu .elementor-nav-menu–main:not(.e–pointer-framed) .elementor-item:before“, my underline still seams to work. Why do I then need this in my code?

As always, thank you.
Michelle

Tags:

3

Answers


  1. 0

    Ans 1: There is no other way to do this now.

    Ans 2: Only this css should work fine if you put it in your Nav menu widget > Advanced > Custom css tab or in wp customizer if you want to apply it to any other nav menu throughout the site

    .e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}

    The other css that you have is used to avoid affecting the other pointer style of nav menu widget such as the frame option.

    Login or Signup to reply.
  2. 0

    this code is working properly.good Soykot

    .e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}
    Login or Signup to reply.
  3. 0

    If you want this to work with a vertical menu, you can do the following menu custom CSS:

    selector a {
    display: inline-block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search