I would like to lower the navigation underline and also change the color of the navigation line globally for both the footer and header. Can this be done with some custom CSS? If so, some guidance as to how to go about it would be very much appreciated. Otherwise no worries. As a novice I still have managed to get more done with this theme then all the other themes I have tried so far. So thank you WordPress!
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.
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:
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..
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.
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?
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.
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.
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
