Reduce header width

Resolved rod
(@nomadarod)

5 years, 4 months ago

Hi,
After adding the logo, the header becomes much larger, and even when hiding the site title and site description and the logo becomes aligned with the menu, there is plenty of width that I would like to get rid off.

Is it a proper way to do it to simply reduce the padding in the .site-main and .site-header classes? Or could it bring responsiveness issues later?

And could the space between the logo and the menu, (which seems to be a margin from the menu?) be used for a title? How could I use it for site title or description?

The page I need help with: [log in to see the link]

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

Thread Starter rod
(@nomadarod)

5 years, 4 months ago
Hi Oliver,

Not quite. I am looking for keeping the logo vertically aligned with the Menu, as it is, but reducing the height of the header so it becomes as minimal as possible.

I tried this in my child-theme, but it didn’t respond. I missed something in the code?:
```
/* Header styling*/
@media only screen and (min-width: 822px) {

	.site-header, .site-main {
		padding-top: calc(0 * var(--global--spacing-vertical));
		padding-bottom: calc(0 * var(--global--spacing-vertical));
	}
}
```
Update: Never-mind. Emptied the browser cache and it worked.
- This reply was modified 5 years, 4 months ago by rod.
- This reply was modified 5 years, 4 months ago by rod.
Thread Starter rod
(@nomadarod)

5 years, 4 months ago

Thanks Oliver. I will change it.

Do I need to add all other @media widths so it has the same behavior in all screen sizes? And would this ask for some other responsiveness oriented css (I thought that’s what var() was for? ) or I don’t have to worry?

Really grateful for your presence and all the support. 5 stars ^_^
Oliver Campion
(@domainsupport)

5 years, 4 months ago
If you want it to work across all devices then just remove the media queries … 🙂
```
.site-header, .site-main {
	padding-top: 0;
	padding-bottom: 0;
}
```
The var() function is just to use a CSS variable. Because these are not compatible with older browsers I would definitely avoid them in your custom CSS.

This new theme is the first WordPress default theme that makes (a lot of) use of CSS variables but it still imports a completely different style sheet when it detects IE11 so as to be compatible.

Oliver
Thread Starter rod
(@nomadarod)

5 years, 4 months ago

Aaah, it was much simpler than I thought! ^_^

Thank you for putting it so clear. It’s a real pleasure to discover and come to understand what I’m doing, to feel like I’m advancing in my site and to feel very reassuring to have you there to take us by the hand. Sincere gratitude.

Oliver Campion
(@domainsupport)

5 years, 4 months ago

You’re very welcome!

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

The topic ‘Reduce header width’ is closed to new replies.

Tags