Jump to content

How To Make Border Go Under Navigation Bar?

Recommended Posts

Site URL: https://www.rafida.org

Hey,

I've added some custom code to make the announcement bar, navigation, and social links to stick while scrolling.
The only issue now is that for some reason the orange borders on the edge of the site are messed up.

- On the right side the orange border goes under the navigation bar,
- On the left side the orange border goes over the navigation bar.

Is there a way to make the orange bar go under the navigation on the left?

website: rafida.org
pass: lastphasetesting3

- I've added a screenshot highlighting the issue.
- I've added the code I used to make the announcement bar, navigation, and social links to stick while scrolling.

 

/* remove close button on announcement bar */
.sqs-announcement-bar-close { display: none !important }

/* remove underline link */
.sqs-announcement-bar-dropzone a {
    text-decoration: none;
	border-bottom: none;
	background-image: none;
}

.Header.Header--top {
  position: fixed;
  top: 41.5px;
  z-index:99999;
  width:100%;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.1)
}

.Header--overlay.Header.Header--bottom {
  top: 95px;
  z-index:9999;
}

.Header.Header--bottom {
  top: 50px;
  z-index:9999;
}

.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

.Intro {padding-top:110px;}
.Index {padding-top:110px;}
.Main {padding-top:110px;}
.Main.Main--page {padding-top:0px !important;}
.Main.Main--blog-item {padding-top:0px !important;}

@media only screen and (max-width: 480px) {
  .Main {padding-top:0px !important;}
  .Intro {padding-top:0px !important;}
  .Index {padding-top:0px !important;}
}

 

Screenshot 2020-09-14 at 01.51.17.png

Link to comment
  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply

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.