Underline Menu Link

How can I have each of the links in the Main Menu underlined, by default? Also, is there a way to have a default link text color when the site loads and as you scroll down and the black background appears behind the menu links, to change the default color of the links?

Thanks

Hello there,

Try this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #mainnav ul.menu > li > a {
      color: #ff0000;
      border-bottom: 2px solid #ff0000;
    }

    .float-header #mainnav ul.menu > li > a {
      color: #fff000;
      border-bottom: 2px solid #fff000;
    } 

Regards,
Kharis

Thank you Kharis. It works great, but I would like to tighten up the space between the text and the underline. It there a way to bring the underline up a pixel or two?

Hello there,

Try replacing this CSS code:

    #mainnav ul.menu > li > a {
      color: #ff0000;
      border-bottom: 2px solid #ff0000;
    }

to:

    #mainnav ul.menu > li > a {
      color: #ff0000;
      border-bottom: 2px solid #ff0000;
      line-height: 21px;
    }

Regards,
Kharis