WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Header issue (9 posts)

  1. rasmusbi
    Member
    Posted 11 months ago #

    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

    to this: 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/

    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!

  2. ahortin
    Member
    Theme Author

    Posted 11 months ago #

    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 :-)

  3. rasmusbi
    Member
    Posted 11 months ago #

    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/ and i want to change that white background to this background image: http://brandbuzzie.com/rasmusbiasi/wp-content/uploads/2013/08/rasmus-header61.jpg cause then it looks more like everything is same.

  4. ahortin
    Member
    Theme Author

    Posted 11 months ago #

    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.

  5. rasmusbi
    Member
    Posted 11 months ago #

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

  6. ahortin
    Member
    Theme Author

    Posted 11 months ago #

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

  7. rasmusbi
    Member
    Posted 11 months ago #

    hmm, so now i changed to this:

    #headercontainer {
    background: url(""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?

  8. ahortin
    Member
    Theme Author

    Posted 11 months ago #

    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

    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;
  9. ahortin
    Member
    Theme Author

    Posted 11 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.