Title: Header issue Last modified: August 21, 2016 --- # Header issue * Resolved [rasmusbi](https://wordpress.org/support/users/rasmusbi/) * (@rasmusbi) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/) * I was trying to make the header stick so it follows me when i scroll. * What i did was that i added “fixed” in here: * .site-header { * clear: both; width: 90%; font-size: 16px; font-size: 1rem; max-width: 1200px; margin: 50 auto; padding: 0; position: fixed; color: #000; * And it went from this: [http://screencast.com/t/rhWedhuclUjx](http://screencast.com/t/rhWedhuclUjx) * to this: [http://screencast.com/t/8rvCRcwtmG](http://screencast.com/t/8rvCRcwtmG) * Now the menu is fixed and that is all good, but the menu text does not show when you scroll because it blends in with the text on the page. * So i was thinking of adding a banner as a header background that follows the menu when you scroll so it looks like the first but stays with me all the way. * I cant find where to do this, can you please help me? * This is the url to the site i am working on if you need to see what i am talking about: [http://brandbuzzie.com/rasmusbiasi/](http://brandbuzzie.com/rasmusbiasi/) * I am pretty new to CSS so most of the things i made i managed to google but this is not something i can make on my own. * Thanks! Viewing 8 replies - 1 through 8 (of 8 total) * Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/) * (@ahortin) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999165) * 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 🙂 * Thread Starter [rasmusbi](https://wordpress.org/support/users/rasmusbi/) * (@rasmusbi) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999248) * 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: [http://brandbuzzie.com/rasmusbiasi/](http://brandbuzzie.com/rasmusbiasi/) and i want to change that white background to this background image: [http://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg](http://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg) cause then it looks more like everything is same. * Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/) * (@ahortin) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999328) * If you want to use an actual image, rather than just a colour, replace your background colour with this… * ``` background: url("http://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. * Thread Starter [rasmusbi](https://wordpress.org/support/users/rasmusbi/) * (@rasmusbi) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999391) * Thank you. * Very strange, nothing happened =/ * This is how that section looks like now: * #headercontainer { background: url("[http://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg"](http://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. * Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/) * (@ahortin) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999397) * If you look in your file, you’ll see that you’ve got… * ``` background: url(""http://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 ” “. * Thread Starter [rasmusbi](https://wordpress.org/support/users/rasmusbi/) * (@rasmusbi) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999398) * hmm, so now i changed to this: * #headercontainer { background: url("”[http://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg”"](http://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? * Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/) * (@ahortin) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999404) * 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. * [http://cl.ly/image/0H1r3B0L1q1b](http://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("http://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg") repeat scroll left center #FFFFFF; ``` * Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/) * (@ahortin) * [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999405) * 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. Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Header issue’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/quark/1.4.1/screenshot.png) * Quark * [Support Threads](https://wordpress.org/support/theme/quark/) * [Active Topics](https://wordpress.org/support/theme/quark/active/) * [Unresolved Topics](https://wordpress.org/support/theme/quark/unresolved/) * [Reviews](https://wordpress.org/support/theme/quark/reviews/) * 8 replies * 2 participants * Last reply from: [Anthony Hortin](https://wordpress.org/support/users/ahortin/) * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/header-issue-15/#post-3999405) * Status: resolved