Jump to content

Folder: Alignment & colour on hover

Recommended Posts

Hello.

I have added some css to change a folder on my primary menu but I have two issues that I need assistance with:

  1. I want the drop down folder and it's pointer to be centered with the name of the menu item, and
  2. How do I get the colour on hover to go right to the edges (left and right) instead of stopping short.

For the life of me I can't work either of these issues out.

Website: https://stephanie-g.net/

TIA

folder-issue.jpg.de1dc7db6ccbd2323d48f6842150cb8c.jpg

Link to comment
  • Replies 8
  • Created
  • Last Reply

@StephanieG Add to Home > Design > Custom CSS

Question 1.


/* Center Dropdown */
.Header-nav-folder {
 margin-left: -2em !important;
}

Question 2. Change padding: 7px !important; to padding: 7px 0 !important;

in the following code


.Header-nav--primary .Header-nav-item:nth-child(2) .Header-nav-folder {
   background-color: #f4afcf !important;
   min-width: 100px !important;
   color: #fff !important;
   font-family: karla,sans-serif;
   font-size: 12px;
   padding: 7px !important;
   text-align: center;
   letter-spacing: 1.5px;
}







Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@StephanieG

You're welcome. I see instagram (footer) has double underline. Do you want to remove 1?

Click Accept Answer if it worked. Other members can use if they know it worked. Thanks.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Archived

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.