Header issue

Instead of adding any styles to .site-header, change the following styles, and that should sort it out (around line 637).

This will make the top header fixed as well as give it a background colour, so that you can see the menu when the rest of the site scrolls.

#headercontainer {
   background-color: #fff;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 100;
}

Since the top is now fixed, you’ll also need to increase the top margin for the banner (around line 670).

#bannercontainer {
   margin-top: 110px;
   width: 100%;
}

Hope this helps ??

Great thanks so much!

That did the trick!

Now i only need to change the white color to the background image, so i get that i need to place the url for the image as well as width and height, but how do i code this?

As i told you i actually did everything until now by googling so i dont really get how this code works, i just use “common sense” and ask people who know – Learning by doing ??

Thanks again for your help!

This is the looks now: https://brandbuzzie.com/rasmusbiasi/ and i want to change that white background to this background image: https://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg cause then it looks more like everything is same.

If you want to use an actual image, rather than just a colour, replace your background colour with this…

background: url("https://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg") repeat scroll left center #FFFFFF;

That line also sets the background to #fff (white), the same as before, in case the image can’t be found for some reason.

Thank you.

Very strange, nothing happened =/

This is how that section looks like now:

#headercontainer {
background: url("https://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg") repeat scroll left center #FFFFFF;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

And still i see the white banner, i have tried and the link for the image works so what have i done wrong?

Thanks again.

If you look in your file, you’ll see that you’ve got…

background: url(""https://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg"") repeat scroll left center #FFFFFF

Notice the " at the start and end of the URL. You need to get rid of these and just have the URL between ” “.

hmm, so now i changed to this:

#headercontainer {
background: url("”https://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg”") repeat scroll left center #FFFFFF;

And then the whole image and the white background disappeared ??

i put the url between the “” but it still dont seem to work?

Have a look at this image, you can see that you have extra text (quote;) in the url parameter. As well as that, you’ve now got part of my comment from above as well.

https://cl.ly/image/0H1r3B0L1q1b

You might be having issues copying ‘n pasting. Instead, just type in the proper style and remove that extra line of text.

background: url("https://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg") repeat scroll left center #FFFFFF;

I’d also suggest that you use either Firebug (for Firefox) or Chrome Developer Tools (for Chrome). It’ll help you debug small issues like this.