Jump to content

Customization/styling of dropdown menu (alignment, selection, transparency/colour) [7.1]

Recommended Posts

Site URL: https://bulldog-perch-zdly.squarespace.com


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
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

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


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.