Jump to content

Navigation covering top of sections (Flexbox)

Recommended Posts

Site URL: https://brandonhuntonline.com/


I'm using flexbox (for the first time, and mostly LOVING it!) but am having the issue of my navigation covering my image on the right. How do I get the navigation to not cover any of my sections? (This also happens when I scroll back to a previous anchor link from the bottom. The top part is hidden under the navigation.)

PW: Gamer


// anchor links - smooth scroll effect
html { scroll-behavior: smooth;}
//-- Change Button Hover Color
.btn:hover {background-color: grey!important; color:#000}
.sqs-block-button-element:hover {background-color:grey; color:#000}
//-- No Underline Links
header a {
background-image: none !important;
footer a {
text-decoration: none !important;
//-- 50% Split Sections WITH CONTENT IN BOTH
.sections {
display: flex;
flex-wrap: wrap;
.page-section { width: 100%;
.content-wrapper {
box-sizing: border-box!important;
[data-current-styles*='"customContentWidth": 30'] {
width: 30%!important;
.content {width: 100%!important;}
[data-current-styles*='"customContentWidth": 70'] {
width: 70%!important;
.content {width: 100%!important;}
[data-current-styles*='"customContentWidth": 51'] {
width: 50%!important;
.content {width: 100%!important;}
[data-current-styles*='"customContentWidth": 33'] {
width: 33.33%!important;
.content {width: 100%!important;}
@media screen and (max-width: 800px) {
#siteWrapper & section.page-section {width: 100%!important;}
//-- Floating Social Links
@media only screen and (min-width:640px){
    display: block !important;
    margin: 20px 10px !important;
    position: fixed !important;
    top: 30% !important; 
    /* Adjust this percentage to move the icons up or down */
    right: 5px !important;
    z-index: 99 !important;
/*===Full width Instagram ===*/
section[data-section-id="61a40048e0deb77695c8bf7a"]  {
min-height: initial!important;
.content-wrapper {
padding: 0!important;
max-width: 100%;
.sqs-row .sqs-block.instagram-block{
padding: 0!important;
.sqs-video-wrapper.video-fill {
.sqs-layout > .sqs-row {
margin: 0!important;


Screen Shot 2022-01-19 at 1.04.00 AM.png

Screen Shot 2022-01-19 at 1.07.51 AM.png

Link to comment

Option 1. Add a Blank section on top then use CSS to set its height about 100px

Option 2. Add this to Design > Custom CSS

@media screen and (min-width:992px) {
[data-section-id="61e645de8a934c7aa67c938c"] {
    margin-top: 30vh;


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.