Adding accent line above drop-down menu

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:

And here's how it currently looks in Squarespace:

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;
}

Can you share site url?

5 hours ago, tuanphan said:

Can you share site url?

@tuanphan

URL: https://suncoconstruction.squarespace.com/

Password: sc-2024

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;
}

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;
}

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
  • 

• 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;
}

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

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

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;
}

to move dropdown up, use this code

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