[Resolved] Underline Navigation Menu always with Elegance line (Adjustable)

Home Forums Support Underline Navigation Menu always with Elegance line (Adjustable)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #295395
    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
    #295401
    Leo
    Staff
    Customer Support

    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.

    #295533
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #295649
    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.

    #295731
    Leo
    Staff
    Customer Support

    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.

    #295783
    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

    #295785
    Joerg

    HOME ∨
    ____
    ………___

    #295930
    Leo
    Staff
    Customer Support
    #296510
    Joerg

    Worked also. Wonderful. Thanks so much!

    #296532
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.