Need help? Check out our Support site, then

CSS help on Penscratch theme

  1. lindacassidylewis

    I would appreciate help with CSS on the Penscratch theme. I customized the CSS to move the header above the navigation menu and reduced the padding above the menu, but I can't figure out what I need to change to reduce the padding below the menu.

    This is my blog:

    The blog I need help with is

  2. Hi Linda,

    Nice work on customising Penscratch. :)

    To reduce the padding at the bottom of the menu, you can add the following snippet to the CSS panel of the Customizer:

    .site-header {
        padding-bottom: 0;

    Let me know how that goes or if extra questions come up.

  3. lindacassidylewis

    Thank you for helping this CSS newbie, siobhyb. :-)

  4. You're most welcome! We're right here if extra questions come up, too.

  5. lindacassidylewis

    And so soon, I do have another question. I just viewed my site on my phone and saw that the header extends to the right. It's the size recommended for the theme. Is there a way to make it move to the left when viewed on a smaller screen?

  6. Hi Linda,

    You could make use of a media query to push the header to the left on certain devices.

    The following CSS includes a media query that floats the header to the left on devices that are 960px in width or smaller:

    @media screen and (max-width: 960px) {
        .custom-header {
            left: 0;

    Can you give that a try and let me know how you get on?


  7. lindacassidylewis

    It worked perfectly! Thank you again, siobhyb. :-)

  8. You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic