Underline Navigation Menu always with Elegance line (Adjustable)

[Joerg]

I would like to permanently underline all menu items. This should be independent of whether these were visited or not. It’s about elegance. The distance, the thickness and the length of the line should be adjustable. In the ideal case also the color, but it is also ok if the menu color is used.

1. Where do I insert the code?
2. What is the code?

Perhaps it can be so in the medium term make editable via the menu.

Many Thanks.

@Tom nice Avatar Photo! Have also a 9month son.

GP Premium 1.2.96

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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 🙂

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

[Joerg]

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.

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joerg]

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

[Joerg]

HOME ∨
____
………___

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joerg]

Worked also. Wonderful. Thanks so much!

[Leo]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts