picvic Posted July 11, 2020 Share Posted July 11, 2020 Site URL: https://bulldog-perch-zdly.squarespace.com Hi! I'm trying to customize my dropdown menu in the 7.1 template Matsuya, and have combined various bits of coding that I found online - but am getting syntax error messages in the Custom CSS. What I would like is for my site header dropdown menus to: have all folder items adhere to a LEFT alignment on the dropdown menu (I think the default is right when you have a right header item alignment) have a colour selection on hovering on a menu item be half transparent, at least in terms of the menu background I've included the code bits here. I suspect that some of the code is specific, while some parts of it is not specific enough, and that's the reason it's not working. Supergrateful for any help on this! /Vic Password: 2020Go /* Nav item color */ .header-nav-item a { color: #000000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: #336699 !important; } /* Nav item active color */ .header-nav-item--active a { color: #336699 !important; } //-----dropdown menu alignment----- .header-nav-folder-item { text-align: left !important; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: center !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: rgba(76, 175, 80, 0.6); !important; } //-----Dropdown menu styling----- ..header-nav .header-nav.item— folder .header-nav-folder-content { padding: 0; .header-nav-folder-item { padding : .5em 1em: } .header-nav-folder-item:hover { background: 000; a (color: #fff;) }} Link to comment
Kate Posted July 12, 2020 Share Posted July 12, 2020 Freebie for the color selection on a navigation item here: https://www.squareaddons.com -- scroll down to bottom of page where "navigation highlighter effect" is shown. If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! Link to comment
picvic Posted July 12, 2020 Author Share Posted July 12, 2020 26 minutes ago, Kate said: Freebie for the color selection on a navigation item here: https://www.squareaddons.com -- scroll down to bottom of page where "navigation highlighter effect" is shown. Thanks for this, Kate! It's not exactly what I'm looking for, for this particular site, but I will definitely keep it in min for future projects! 🙂 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.