Remove whitespace above menu

  • Resolved aikichick2012

    (@aikichick2012)


    7 months, 2 weeks ago

    Hello there,

    working with Twenty twentyone and so far I like it. However, the whitespace above the main menu at the top of the page is far too wide for my taste. How can I reduce that, please?

    Thank you for your help 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator threadi

    (@threadi)

    7 months, 2 weeks ago

    You mean the spacing in the header area above the menu? There are several ways to adjust this:

    a) With custom CSS:

    body .site-header {
     padding-top: 42px;
    }

    You can customize the value. Note that you may want to use different values for the mobile view, in which case you will need to work with media queries. You can store the CSS code under Appearance > Customizer > Additional CSS, in the style.css of your child theme, or via the Custom CSS plugin.

    b) With the Options for Twenty Twenty-One plugin:
    This adds multiple new options under Appearance > Customizer, including the option to change the spacing in the header area using a slider under Heading Options > Header Padding Top.

    Thread Starter aikichick2012

    (@aikichick2012)

    7 months, 2 weeks ago

    Thanks a million, that Plugin is wonderful and helps me a lot!

    Thread Starter aikichick2012

    (@aikichick2012)

    7 months, 2 weeks ago

    Resolved with Plugin.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Remove whitespace above menu’ is closed to new replies.