Fixed Header Superhero

  • Author
    Posts
  • #1329520

    femicidenews
    Member

    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.

    #1329698

    femicidenews
    Member

    I mean: Keep header at top while scrolling

    #1329699

    timethief
    Member

    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.

    #1329700

    timethief
    Member

    this who do = those who do

    #1329775

    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.

    #1329787

    justpi
    Member

    @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;
    }

    #1329797

    @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!

    #1329798

    femicidenews
    Member

    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.

    #1329799

    justpi
    Member

    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.

The topic ‘Fixed Header Superhero’ is closed to new replies.