Jump to content

Place my navigation bar over image and 200px lower

Recommended Posts


I need a webpage where I can place the navigation bar about 200px lower than the normal top-of-the-page-placed navigation bar, with an image above/behind it.

I put in a margin of 200px through CSS, which makes the navigation bar move down... But then I get a solid color around/behind it, instead of the picture of the website background. I looked into it: that solid color background is the footer background color.

How can I move my navigation bar down, without making this huge space of solid color where I can't put anything?

(See picture: the orange = the space I automatically created when changing the margins of my navigation bar. But I want that navigation bar to go over the picture that you see below.)


PS - this is the Stella template, but I don't really care which one I use, as long as I can get that navigation bar right


(PPS - I don't care if it's an actual 'navigation bar', or a white space with buttons in it... I just need the white line with blue text you see below, without that solid background I can't change anything about)

navbar background.png

Link to comment
  • Replies 1
  • Created
  • Last Reply


I found the solution:
In CSS, apart from the margin adjustment, I also added this and now it works with the image behind it:

header {
position: absolute;
 width: 100%;
z-index: 4;

Link to comment


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.