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

Place my navigation bar over image and 200px lower

Question

Posted (edited)

Hi,

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

Hey, 

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...