- This topic has 9 replies, 3 voices, and was last updated 3 years, 11 months ago by
Leo.
-
AuthorPosts
-
March 21, 2017 at 12:58 pm #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.96March 21, 2017 at 1:49 pm #295401Leo
StaffCustomer SupportHi 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 theborder-bottom
hex code
Length can be adjusted in the second px number ofpadding
.Let me know if this works.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 21, 2017 at 9:25 pm #295533Tom
Lead DeveloperLead DeveloperAny 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-developmentMarch 22, 2017 at 4:33 am #295649Joerg
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 definableFor 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.
March 22, 2017 at 7:44 am #295731Leo
StaffCustomer Support1. 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-link2. 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 theborder-bottom
px number.
– Color can be adjusted in theborder-bottom
hex code (#000000).
– Length can be adjusted in the second px number ofpadding
.Let me know if this is clear.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 22, 2017 at 9:02 am #295783Joerg
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
March 22, 2017 at 9:04 am #295785Joerg
HOME ∨
____
………___March 22, 2017 at 12:31 pm #295930Leo
StaffCustomer SupportTo 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/March 23, 2017 at 2:27 pm #296510Joerg
Worked also. Wonderful. Thanks so much!
March 23, 2017 at 3:55 pm #296532Leo
StaffCustomer SupportYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.