Navigation links custom css

Site URL: https://www.everbreezepsych.com/home

Hello! My site is using the Foster template. 

1. How can I make the main nav links underlined on hover and stay underlined when they're active?
2. Is there any way to move the footer navigation block to the top block?
3. I'd also like to change the color of the social link to #FFA666 at all times.

Thanks!

Add to Home > Design > Custom CSS

1.

a.Header-nav-item.Header-nav-item--active, a.Header-nav-item:hover {
    text-decoration: underline;
}

2

Like this or?

3. 

.social-icons-color-white.social-icons-style-knockout .sqs-use--mask {
    fill: #FFA666 !important;
}

@tuanphan

1. Thank you! Is there a way to add more space between the text and the line?
2. I'd like the footer nav to be the first thing in the block - like this:
3. Perfect, thanks!

1 minute ago, sarahrab said:

@tuanphan

1. Thank you! Is there a way to add more space between the text and the line?
2. I'd like the footer nav to be the first thing in the block - like this:
3. Perfect, thanks!

1. Remove my code and use this. Change red to color what you want.

a.Header-nav-item.Header-nav-item--active, a.Header-nav-item:hover {
    border-bottom: 1px solid red;
    padding-bottom: 5px !important;
}

2. Yes you can but it is time-consuming to handle code (~30 minutes), not free

You need to use CSS flex to reverse the order of items, then do again for Footer Nav, then handle the white lines & spacing.

You can wait for someone to answer for free. Or you can post to some other groups on FB such as SS Community, SS Customization Resources Group.

or view my service in signature.

@tuanphan

Thanks for your help! The navigation links work great. I'll figure something else out for the footer. Thank you!