Add Underline to Primary Navigation Links

Hi William,

Try this:

.main-navigation .main-nav > ul > li > a {
    text-decoration: underline;
    text-underline-position: under;
    text-underline-offset: 10px;
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}
.main-navigation .main-nav > ul > li:hover > a {
    text-decoration-color: blue;
}

Just replace the redand bluewith your color code.

Hi Ying this is perfect! Last request:

Is there a way to make the white links turn the red color when hovered over? https://imgur.com/a/MHWM9aY so when I hover the mouse over the white navigation link, it turns the red color of #FD673A?

Thank you again!

Your home page is using a header element to make the content merge with the header.

So the navigation color setting can be found at appearance > elements, look for a header element, check the navigation color setting there.

For pages that doesn't merge with header, you can find the setting at customizer > colors > primary navigation > navigation text, the hover color should be the middle one of the 3.

Hi Ying -

Sorry to be so needy! Is there a way to accomplish the same sort of effect on the links inside the off campus panel?

Trying to add the underline effect there too.

Thank you so much for all of your help!

I've updated the CSS here:
https://generatepress.com/forums/topic/add-underline-to-primary-navigation-links/#post-2155989

YOU ARE AMAZING. Thank you!

You are welcome :)