Alter hover effect and text alignment in submenu

Pier · June 21, 2022

Site URL: https://banjo-smilodon-g838.squarespace.com

Hi guys,

I'm currently building my website banjo-smilodon-g838.squarespace.com. There are two style options in the website navigation that I don't like. I can't find any option in the settings to adjust this, so I think this can only be done via custom code. The two issues are:

1. Currently the hover effect for the menu items is a line trough the text. I'd like it to be an underline

2. The text of the items in the drop-down sub menu (under 'Specialismes') is right aligned, I would like this to be left aligned

Would you please be so kind to help me with custom code for those two issues? I'm too much of a newbie to be able to do this myself, so your help is truly appreciated. Thanks so much.

tuanphan · June 22, 2022

#1. Add to Design > Custom CSS

div.header-nav-item--active>a {
    background-image: none !important;
    border-bottom: 1px solid;
}

#2. Use this CSS

.header-nav-folder-content * {
    text-align: left;
}

Pier · June 22, 2022

Great, both CSS inputs work flawless. Thanks so much for your input!

Alter hover effect and text alignment in submenu

Recommended Posts

Pier

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

Pier

Link to comment

Create an account or sign in to comment

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources