Change navigation underline color

Hi @vastzor could you explain a little more what you’re hoping to do? Generally the underline on the text would match the color of the text. But if you can share an example in more detail of what you’d like to achieve – we can see what the options are.

Hi there jordesign

Thank you for getting back!

Please see attached screenshots A and B. At present when I hover a menu item my navigation menu looks like “B”. I would really like it to look like “A” upon hover. Like I said I am aiming for an underline which is lower with a little overlap and has a different color – again only when I hover over a menu item in both the header and the footer navigation menus. I do not know if this helps but but both the header and footer are template parts. After reading some threads on this forum I figured this might work: Go to the Site editor, >global settings.>Styles > Additional CSS and insert the following code:

header .wp-block-navigation-item__content:hover{color: #111111 !important; text-decoration: underline; text-decoration-color: #20903C;}

footer .wp-block-navigation-item__content:hover{color: #111111 !important; text-decoration: underline; text-decoration-color: #20903C;}

Obviously this code does not address overlap and lowering of the underline because I have no idea as to how this can be done. Haven’t tried anything yet because I want to backup my site before doing anything just in case. Do not think this going to work but I thought I would give a try just to see what happens..

Hope you can provide some insight.

Thanks

vas

Unfortunately the screenshots did not go through. They load but just won’t go through. Is there an email I cant submit them to?

• This reply was modified 4 months, 2 weeks ago by vastzor.

cannot upload images

• This reply was modified 4 months, 2 weeks ago by vastzor.
• This reply was modified 4 months, 2 weeks ago by vastzor.

Here is the link to the image: https://postimg.cc/PLnKJpL5

Hi there,

Could you share a URL to your site? Maybe it will need to be a border on hover or something like that instead, but I can check further by looking at your site current structure.

Hello Felipe,

I am hosting my site on a local host.

Hey @vastzor – it’s tricky to get the exact CSS code needed – but with my test site I was able to do something like this.

.wp-block-navigation .wp-block-navigation-item__content {
   padding-bottom:2px; 
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
   border-bottom:2px solid red; 
    padding-bottom:0;
}

To tweak this for your needs you can:

• Adjust the CSS selectors to limit it to your footer (if needed)
• Change the border color
• Change the padding to have the gap desired between the text and the ‘underline’. You’ll need to make sure you adjust the padding for the :hover state so it allows for the height of the border that is added.

Could you please give that a try and see how you go?

Hi there jordesign

First, much thanks for taking time to look into it. Really grateful for that! Your code worked just fine however the initial underline is still there upon hover. Please see link https://postimg.cc/PNcPZc55 Hope you can shed some light. Also I was wondering how I can get the underline to overlap the menu item above as in illustration A see link https://postimg.cc/bGTZtws7/a898db20 If this is not possible no worries I am still very happy with the code you provided- only if you we can just get rid of the initial underline.

Thanks again

vas

Hi @vastzor it should be able to tweak that a little ??

.wp-block-navigation .wp-block-navigation-item__content {
   padding-bottom:2px; 
   text-decoration:none !important; // hides the default underline
   padding-left: 20px; padding-right: 20px; // padding so the underline goes wider than the text
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
   border-bottom:2px solid red; 
    padding-bottom:0;
}

Hi jordesign

The underline goes wider than the text only on the right. Please see link https://postimg.cc/CRCPxzjb I checked the position of the menu items and they are all justified to the center. When I saved your code I got the “There is an error with your css structure.” message. Hope you can figure this one out. Otherwise no worries I am still happy with what you have provided.

vas

Hey @vastzor !

I got the “There is an error with your css structure.” message.

Do you have additional css from before as well? Can you share a screenshot of when you try to save the css, and it shows the error?

Had some css from before but never got the error message. The code works just fine except for the underline going wider than the text only on the right. Here is the link https://postimg.cc/1V3mdjwf

@vastzor Can you try removing the comments in the css code, since they’re not correctly formatted? These are the descriptions written with //?

Hi @vastzor

As we haven’t received a response in over a month, we assume your issue has been resolved. However, if you’re still experiencing any issues, please feel free to mark the topic as unresolved or if you have new questions, please start a new topic. Thanks!