Header aboce menu CSS (Penscratch theme)

  • Unknown's avatar
    couchpilgrim · Member ·

    Hi! I’m having problems with getting my header above the menu.
    Currently I don’t have a header, because as it is right now with the header below the menu, it looks kind of stupid. I really want to change that, so I searched the support forums, but I couldn’t find any solution that worked for my theme, the penscratch theme.

    I do have Custom CSS, but I am quite new to it. Help?

    This is my Blog URL:
    http://couchpilgrim.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    On a responsive width theme, such as Penscratch, this doesn’t work well, especially when the header image is not in the same div as the navigation and site title/description, which is the case in this them. You can add the following CSS to your custom CSS at the very bottom, and then narrow your browser window way down and you will see that your header image shrinks to nearly nothing. That is because we had to use position:absolute and move it out of the div it was originally in, which repositioned the other elements on narrower windows and screens.

    First off, add your header image and then narrow and widen your browser window to see what happens. Then add the following to your CSS and again narrow and widen your browser window to see how things behave with the change.

    .site {
    position: relative;
}
img.custom-header {
    position: absolute;
    top: 150px;
    padding-right: 108px;
    padding-left: 108px;
    left: 0;
}
.main-navigation {
    margin-top: 280px;
}
  • The topic ‘Header aboce menu CSS (Penscratch theme)’ is closed to new replies.