Jump to content

Move header nav and social on background banner to above the banner

Go to solution Solved by tuanphan,

Recommended Posts

SS 7.1. Starting with the Clarkson template which has the navigation along the top of a  background image. I would like to bring the navigation to a solid background above the full bleed image. Because the background is selected in the section below the header section and fills the header section, those 2 sections seem to have some sort of association, so I'm guessing part of my question is if they can be disassociated.

Here's the current header


and a good approximation of what I'm aiming for



Link to comment

The test page is at https://www.conservenassau.org/testmapspage

I made it with an inelegant solution of creating a background image with a solid color strip at the top- so its really still all one full extent background. Code in the header for the page (since this is just a test) uses absolute position to move the nav and social up to the top. It looks ok at the browser window size I showed in the screenshot, but changing the browser window width sort of mucks it up. I'd love to hear other solutions that are more structural.


Link to comment
  • Solution

You can add this to Design > Custom CSS to add a color bar on top of header

header#header:before {
    content: "";
    background-color: #e5e5e5;
    height: 90px;
    width: 100%;
    position: absolute;
    top: 0;


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

Tuanphan- Thank you! Your time to reply is very much appreciated and is a good lesson for me for using :before and :after elements. 

Interestingly, in the editor the background image overwrites the solid bar at the top of the header- which had me worried that it wasn't working, but when viewed in a browser outside of the editor, It is perfect.

Thanks again

Edited by LPearlstine
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.