Jump to content

Adding accent line above drop-down menu

Recommended Posts

Hi! I'm working on a custom drop-down and have most of the styling in place, but needs some help getting this over the finish line. Here's what I'm needing some help with:

  • add a 6px line above the link in the header when a drop-down is enabled. The line should be the same width as the drop-down, but be 6px tall and sitting at the top of the page above the menu link
  • center align text in drop-down
  • add drop-shadow under drop-down menu
  • all links to be #1E1E1E (keep orange and bold effects on hover though)

This is what the design should look like:Screenshot2024-06-08at1_55_28PM.thumb.png.11b2eae747c2832a5ab00d0893c36439.png

 

 

And here's how it currently looks in Squarespace:

Screenshot2024-06-08at1_55_59PM.thumb.png.1da77a0b7f048354252cd88ca4d9de98.png

 

 

Here's my current custom CSS:

 

/* CHANGE DROPDOWN STYLES */
.header-nav-folder-content {
   background: #D1D7DF !important;
}

.header-nav-folder-title {
  pointer-events: none;
}
.header-nav-item--active a {
  background-image: none !important;
  color:#1B3760 !important;
}
.header-nav-folder-content {
  min-width: 90px !important;
}

.header-nav-folder-item--active .header-nav-folder-item-content {
  background-image: none!important;
}

/* HEADER LINKS */
.header-nav-item a:hover {
    color:#B87D4B !important; font-weight: bold!important;
}
.header-nav-item a:active {
    color:#1B3760 !important;
}

.header-nav-item a:active {
    color:#1B3760 !important;
    background-image: none !important;
}

Link to comment
  • Replies 5
  • Views 295
  • Created
  • Last Reply

Top Posters In This Topic

With center dropdown, you can use this CSS code

div.header-nav-folder-content * {
    text-align: center;
}
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

image.png.b38a43d4d4e09cb26727c405a544d406.png

with line on top, use this CSS code

div.header-nav-item>a {
    height: 100px;
    justify-content: center;
    align-items: center;
    display: flex;
}

div.header-announcement-bar-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.header-nav-item.header-nav-item--folder.header-nav-item--active {
    border-top: 3px solid #b87d4b !important;
}

image.png.1c6864112304e335c46a25e457f36e13.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

Thansk @tuanphan! The code above worked for the most part, but has also created some new issues:

  • The text links run outside of the dropdown background
    • It would be ideal to have the lines break so in the screenshot below, there would be 4 lines of text instead of 2
    • Screenshot2024-06-12at7_06_58PM.thumb.png.0d31a31d57995833b243cf6dec2da071.png

 

  • The orange line at the top should only appear when hovering
  • The code for the orange line moves the dropdown background below the header. I adjusted the code slightly to fix this, but that did not resolve the issue of the orange line not appearing

 

Revised code for the orange line:

/* NAV TOP LINE */
div.header-nav-item>a {
    height: 60px;
    justify-content: center;
    align-items: center;
    display: flex;
}

div.header-announcement-bar-wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.header-nav-item.header-nav-item--folder.header-nav-item--active {
    border-top: 3px solid #b87d4b !important;
}

 

Edited by chymer
Link to comment

The line on top, is for Active Item, not Hover

If you want to make it appears on hover, change this 

image.png.a6a1fb0d2fb72cd766abe609131e3d2b.png

to this

.header-nav-item.header-nav-item--folder {
    border-top: 3px solid transparent !important;
}
.header-nav-item.header-nav-item--folder:hover {
    border-color: #b87d4b !important;
}

To fix dropdown width, use this code

a.header-nav-folder-title[href="/portfolio-1"]+div {
    min-width: 200px !important;
}

image.png.2676775f8696976bc4003a1cee142ca3.png

to move dropdown up, use this code

.header-nav-folder-content {
    top: 70px !important;
}

image.png.58de3a82452501e7524ef20f5c1a926a.png

image.png

image.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.