Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Place my navigation bar over image and 200px lower


Posted (edited)


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

Edited by mvdb

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0


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;

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...