I want to reduce the height of the header and navigation menu to 120px.

Hi @shreen2008,

Try putting this code in your custom CSS bar (at Customize).

@media only screen and (min-width: 768px) {
.site-header {
    margin: 0;
    padding: .8rem 0;
}
}

Let me know if that helps.

-Chris

• This reply was modified 5 years, 11 months ago by Chris.

I would also like to reduce the header image display by at least 50% in twenty nineteen also.

Any thought on a bit of CSS to achieve this ?

https://jomcallister.co.uk/wetpaint

Hello,

Because you have a featured image it may affect the appearance slightly. I’m still getting familiar with the Twenty Nineteen theme.

Nevertheless you can shorten the padding from the top like this:

@media only screen and (min-width: 768px) {
.site-header {
    margin: 0;
    padding: 10px 0;
}
}

Paste this code into your Customize CSS box (Customize bar on left). The “(min-width: 768px)” means that it will affect devices of 768px (iPad) and larger. For mobile devices smaller than iPad it will show the theme’s default responsive settings.

You can also change the width of smaller devices by adding additional break point code.

-Chris

Hello,

> I would also like to reduce the header image display by at least 50% in twenty nineteen also.

I’m trying the same, but the featured image always fills the screen. I’ve tried experimenting like this, but I’m clearly on the wrong track?

.site-header.featured-image {
    height: 300px;
}

https://jasondean.co.uk/

@facelikebambi, @shreen2008, @chrisnawojczyk, @dietredthunder I found this on the PootlePress site:

How to reduce the height of the 2019 Theme featured image
By default the 2019 featured image is set to fill the full height of the screen. This looks great, but the downside is that your readers have to scroll to see your content.

To reduce the height of the 2019 Theme featured image, we just need a simple bit of CSS. Put this in the WordPress customizer. Click on customize / additional css. Change the value 70vh to whatever you would like, with 100 being full height.

.site-header.featured-image {
   min-height: 70vh;
 }

Source: https://www.pootlepress.com/2018/12/5-tips-tricks-and-css-tweaks-to-easily-customize-the-wordpress-2019-theme/

• This reply was modified 5 years, 8 months ago by mbergsma.