Need help? Check out our Support site, then


Fixed Header Superhero

  1. Hi!

    I just bought the custom design. I would like to know how I can make my header not scroll, rather stay fixed for the Superhero theme?

    Also, if it's possible to extend the image in my current header as the full background of the header. (if that makes sense.)

    http://femicideacuns.wordpress.com

    The blog I need help with is femicideacuns.wordpress.com.

  2. I mean: Keep header at top while scrolling

  3. I understand what you mean but that matters not as I do not help with CSS editing and this who do help with it are not logged in. Also note that when they do log in they will address threads with the earliest date stamps and time stamps and move forward to this one. Bottom line: Please subscribe to this thread so you are notified when they respond and please be patient while waiting.

  4. this who do = those who do

  5. I would like to know how I can make my header not scroll, rather stay fixed for the Superhero theme?

    I checked http://femicideacuns.wordpress.com/ and I see that you figure this out using the following CSS:

    #header {
    	position: fixed;
    }

    Nice work!

    Also, if it's possible to extend the image in my current header as the full background of the header. (if that makes sense.)

    Here is some CSS that will add a repeating image all the way across the top of the main header in the Superhero theme:

    #masthead-wrap {
    	background: url(http://femicideacuns.files.wordpress.com/2013/05/cropped-screen-shot-2013-05-16-at-17-31-094.png);
    }

    If you make a change like this, you will probably also want to edit your font colors so they're easier to read. Try modifying colors using the Appearance → Themes → Customize → Colors panel first.

    And you can either change out the existing background image or remove it from the Appearance → Themes → Customize → Background panel. Click the arrow to the right of the image there to see the options.

  6. @Sheri: The header in Superhero is fixed by default, so I think femicidenews want the opposite of what they seem to be asking.

    @femicidenews: When you say "keep header at top", this can mean top of browser window or top of blog. I think you mean top of blog (but that's not "fixed": fixed means in relation to the browser window). If so, add this:

    #masthead-wrap {
        position: absolute;
    }
  7. @justpi, thanks, heh, I might have just read "Keep header at top while scrolling" before without looking at the Superhero demo and interpreted that as wanting it "fixed." Thanks for posting a new solution!

  8. THANK YOU very much from the bottom of my heart :)

    With regard to changing the "links" (femicide news, about femicide, about us etc), is it possible to place them directly below the header in a straight line?

    Also is it possible to change their colour to a stronger whiter one? As the Appearance -> Customize option only allows me to change the colour of the title "Femicide News" but not the other sub-links.

    Many thanks.

  9. You're welcome!

    To make the menu links white, and place them below the tagline, add this:

    #masthead hgroup {
        float: none;
    }
    .main-navigation {
        float: left;
        width: 100%;
    }
    .main-navigation ul {
        text-align: left;
    }
    .main-navigation a {
        color: #FFFFFF;
        padding: 3px 40px 3px 0;
    }

    Change the three padding values to adjust the space above/between/below the links.

    Personally I don't like the result: too many items in the left half, too much empty space in the right half. I'd probably create a full-width image with the title & tagline on it, hide the actual blog title & tagline, and place the menu links in one centered line below the image.

Topic Closed

This topic has been closed to new replies.

About this Topic