Underline Navigation Menu always with Elegance line (Adjustable)

Hi there,

Try the following steps:

1. Wrap the Navigation Label of the menu items that you want to underline like this: <h4><u>Menu Item</u></h4>.
This is done in Appearance > Menus.

2. Add this CSS:

.main-navigation .main-nav ul li a h4 u {
    text-decoration: none;
    border-bottom: 3px solid #000000;
    padding: 0 10px;
}

using one of the first two methods here: https://docs.generatepress.com/article/adding-css/

Thickness can be adjusted in the border-bottom px number
Color can be adjusted in the border-bottom hex code
Length can be adjusted in the second px number of padding.

Let me know if this works.

Any reason you chose to use H4s, Leo?

Personally I would just add spans inside the navigation label: <span>Menu Item Label</span>

Then use Leo's CSS:

.main-navigation .main-nav ul li a span {
    text-decoration: none;
    border-bottom: 3px solid #000000;
    padding: 0 10px;
}

That's awesome! Mine is coming up on 14 months. Fun times :)

Good Morning.

I decided to use a ChildTheme to keep a structured overview of my changes / additions. And to make "backups" easier.

Before I go into the details, I have to send ahead of me that I'm beginners in css / html. Sorry.

I have taken my jimdo website under WP, GP and elementor to replicate, or rather, the first ever to be able to form as I really want it. So without these unspeakable limitations of jimdo.

I would like this effect: https://www.auribell.de/

So, I must specify:

The length of the underline should be dynamic:

1. leaded by the length of the menu item
2. the overhang to the right and left should be definable

For me it is not yet clear what you mean by "Wrap the Navigation Label of the menu items" or "add spans inside the navigation label".

Before I decided to GP, I tried myself to modify the WP theme twenntysixteen for my purposes as fullwidth for elementor. I also succeeded in modifying the menu, especially the position of the logo, orientation, etc. So I know that you may need to search certain areas in the various stylessheets and functions.php and change them there.

So far the following has happened:

1. I have entered Leo's code into style.css.
Result: no effect.

2. I have the wrap of Leo before the code law
Result: no effect.

3. I have entered Leo's code from Tom's post.
Effect: the menu items which still have a submenu are underlined with a 3px thick and 10px long line. But only this.

4. If I put Tom's "span" over it (in styles.css - because I do not know exactly what I should start with the "wrap" and "span" - or where exactly how to use it) - has the whole thing Again no effect.

Thank you so much and excuse that i am such a dummy.

Best Jörg

PS @Tom: Misstake my son ist just 9 weeks - not month.

1. Go to Dashboard > Appearance > Menus. Wrap the Navigation Label of ALL parent menu items in span like this: <span>Menu Item Label</span>
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

2. Add this CSS in your child theme:

.main-navigation .main-nav ul li a span {
    text-decoration: none;
    border-bottom: 3px solid #000000;
    padding: 0 10px;
}

You can adjust the following by changing the code above:
- Thickness can be adjusted in the border-bottom px number.
- Color can be adjusted in the border-bottom hex code (#000000).
- Length can be adjusted in the second px number of padding.

Let me know if this is clear.

Hey Leo,

i got you! It works. Thank you so much - the key was your link: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

One Problem left:

On every Primary-Nav-Item-Label with a Sub-Navigation (content page on sub-level) is the arrow in direction bottom.
The underline is under this arrow much deeper and interrupted of the underline of the Menu-Item-Label.

Example:

.HOME. ∨
________
...............___

(Dots are only spaceholder)

Questions:

How can i force or adjust the offset of the line to the Lable?

OR

How can i eleminate the arrow which markes the Sub-Navi

HOME ∨
____
.........___

To remove dropdown menu arrow, this should help: https://generatepress.com/forums/topic/arrow-on-menu-drop-downs/#post-172450

Worked also. Wonderful. Thanks so much!

You're welcome :)