Adjusting Header on Twenty Twenty Four

You can adjust the header height and remove the padding from the menu in your Twenty Twenty Four theme by adding the following custom CSS to your WordPress site. Here’s how you can do it:

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize.
3. In the Customizer, click on Additional CSS.
4. Copy and paste the following CSS code into the provided field:

.nfd-py-sm.nfd-gap-2xl.wp-block-group.is-content-justification-space-between.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-1.wp-block-group-is-layout-flex {
padding: 0px !important; /* change to your needed value */ }

nav.is-responsive.items-justified-right.nfd-gap-lg.wp-block-navigation.is-content-justification-right.is-layout-flex.wp-container-core-navigation-is-layout-1.wp-block-navigation-is-layout-flex { padding: 0px 136px; / *change to your needed value */
}

5. Click the Publish button to save your changes. Or use custom CSS plugin

This CSS code will remove the padding from the menu in your header, which should adjust the height as desired. If you need any further adjustments or have any more questions, feel free to ask!

Thanks,

Mostak

I can’t see any padding on the menu itself. What spacing do you mean exactly?

Thanks for your reply.

I’m trying to remove the 24px top and bottom around the Navigation Bar and Logo.

Here is a screenshot:

https://website-2e552da4.wfh.gfl.temporary.site/wp-content/uploads/2024/06/padding.png

This is not the menu, this is the header. Interestingly, the spacing is set via a plugin from your host: wp-plugin-hostgator.

I therefore see 2 possible solutions for you:
a) You ask the support of the plugin if you can change this somewhere. You will probably have to contact your hoster’s support for this.
b) This CSS code:

body .wp-site-blocks > div.wp-block-group {
padding-block: unset !important;
}

Insert this under Appearance > Editor > Styles > Additional CSS.

@threadi – Thank you! The part (b) code worked!

Just noticed there is another margin from the content below that is adding 19.2px of margin. Is there some simple CSS code that can eliminate this too? Thanks! (Please see linked: https://website-2e552da4.wfh.gfl.temporary.site/wp-content/uploads/2024/06/margin.png)

@mdmostak Thanks for your reply. For some reason I was getting an error when I entered this in.

@threadi

Woohoo! It worked! Thank you for your help 🙂