[Resolved] reduce height in header

[Joel]

Hi,
I would like to reduce the size of the header and menu (above the header), basically reduce the height.
How can I achieve this?

Thanks

[Joel]

I was able to figure this out, by using the spacing add-on. Thanks

[Tom]

Awesome! 🙂

[Peter]

I have the GP spacing add-on too, and I have the same question. However, I only see how to decrease header padding to “0”, not any negative padding or header height with the spacing add-on enabled.
Click on http://bob-cheryl.ptest2.com/. I would like to reduce the header height to say, 66px so that the light grey and dark grey bands are the same eight. Please advise.

Also, is there any sort of “Advanced Search” incorporated into this forum? For example, exact phrase, all words, etc?

[Leo]

Hi Peter,

The height of your logo is 77px so that would be the minimum height of your header unless you downsize the logo.
This CSS below would make your header height as tall as the logo height no matter what size you decide to go with.

.inside-header p {
    margin-bottom: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Unfortunately there is no advance search for this forum. However you can try using google, so search the topic you are looking for and add GeneratePress at the end. It’s been helpful for me that way.

Let me know.

[Peter]

Hi Leo,
I can change how tall the logo is to suit my needs. Let’s say my logo was 100x55px, and that I wanted the header to be, say, 65 pixels tall, is there no way in the customizer to set the header height? If the answer is that there is no way to change the header height in the Customizer, then what CSS would set the header height to a specific number of Pixels?
–
Peter Sale

[Leo]

If your logo is 55px in height and you want the header to be 65px in height, then try the following:
– Add the code I provided above
– Head to Customizer > Layout > Header > Header Padding and add 5px to top and bottom.
Let me know if this works

[Peter]

Hi Leo,
Yes, that works. And I can easily choose whether the space is to be above and below, or just above or just below my logo. That works for me.
–
Peter Sale

[Leo]

Glad it works 🙂

[Peter]

Hello Leo,
I spoke too soon. While I can successfully manipulate my site’s header height as displayed on a PC size screen, on a mobile device the mobile logo is displayed too small and with the primary navigation background. I would like my “mobile” logo to display the proper size and on the same color background as the header displays on a PC. Click on http://bob-cheryl.ptest2.com/ on a PC-sized screen to see the header display properly with its logo. Navigate to that same site on any mobile device to see the problem I’m describing.

BTW, I am attempting to stay with GP settings as much as possible because doing so makes it so easy to change colors site wide while sitting with my client.

[Leo]

Hi Peter,

GP’s mobile header logo/navigation logo is mostly for an icon or a square-ish image.
Since you are using a simplified logo already but it’s still rectangle, can you try the following CSS and see if you like the look?

#mobile-header .main-nav ul li a, 
#mobile-header .menu-toggle, 
#mobile-header .mobile-bar-items a {
    line-height: 60px;
}

.mobile-header-navigation .mobile-header-logo, 
.mobile-header-navigation .mobile-header-logo img {
    height: 50px;
    padding-top: 2px;
}

Let me know.

[Peter]

Hi Leo,
That CSS Code seemed to work perfectly on mobile. Check it out yourself on your smartphone at http://bob-cheryl.ptest2.com/.

Just thinking out loud. Since the mobile logo I used was only 170 pixels x 55 pixels, I’m a bit surprised that I need to use “external” CSS at all. I thought the main point of using a mobile header logo was to avoid the need for custom CSS to make the logo look appropriate on a mobile device.

BTW, I’m attempting to move to using Stylizer 6 for editing CSS, so I would like to move this sort of CSS to my GP child theme’s styles.css file. Are there any problems with doing this that I should look out for?

[Leo]

As for the mobile header background color, currently it’s inherited from from the your setting in primary navigation background color. Changing it for just for mobile requires some CSS unfortuantely:

@media (max-width: 768px) {
    .main-navigation.mobile-header-navigation {
        background-color: #90c3d4;
    }
}

Let me know.

[Leo]

I’m glad you like the look 🙂

You should be good to use a child theme as long as everything is done correctly. Some info here:
https://docs.generatepress.com/article/using-child-theme/

Never hurt to back up your files when migrating things are involved though 🙂

[Peter]

Hi Leo,
Many thanks for the CSS. I will hold it in reserve because I think I would rather just pick a color for the navigation background that is more compatible with my client’s logo.

[Author]

Posts