Greetings
I'm trying to style a tertiary button to match the visual appearance of the nav bar dropdown…
Nav bar has this code:
.header-nav-folder-content * {
color: white !important
}
.header-nav-folder-content {
background: linear-gradient(to bottom, #006C7F, #181B26)
}
.header-nav-folder-content {
border: 1px solid #EBF6F7
}
.header-nav-folder-content {
box-shadow: -3px 5px 5px rgba(0,0,0,0.25)
}
Something similar should work for the buttons, but many properties aren't being applied
e.g. background and border won't play nice in this snippet
.sqs-block-button .sqs-block-button-element--tertiary {
border-radius: 20px 20px 0px 0px;
background: linear-gradient(to bottom, #006C7F, #181B26);
border: 3px solid #EBF6F7;
box-shadow: -3px 5px 5px rgba(0,0,0,0.25);
}
Once this is pinned down I will then add in hover states.
I'd rather stay with the button-element--tertiary naming for classes. Someone else will be maintaining the site once its live. Tertiary is more sensible a naming, than small, medium and large.
Where am I going wrong?
Thanks
Squarespace version 7.1
Theme: Hollie Beaumont [I think. No theme info displayed in the Dashboard] NOT using Fluid Engine