Header and navigation adjustments

Nice site!

Adding this CSS to “Customiizer – Additional CSS” …

.site-header {
max-width: calc(100vw - 2 x 100px);
}
@media only screen and (min-width: 482px) {
.site-header {
max-width: calc(100vw - 2 x 50px);
}
}
@media only screen and (min-width: 822px) {
.site-header {
max-width: calc(100vw - 2 x 100px);
}
}

… and changing the px values to whatever margin you’d like will move the menu and logo closer to the edges of the browser window on different screen sizes.

This CSS will do the same for the header padding (the current equivalent px values are shown) …

.site-header {
padding-top: 22.5px;
padding-bottom: 60px;
}
@media only screen and (min-width: 482px) {
.site-header {
padding-top: 40px;
padding-bottom: 90px;
}
}
@media only screen and (min-width: 822px) {
.site-header {
padding-top: 72px;
padding-bottom: 90px;
}
}

Let me know if that helps and we will create new options in the plugin accordingly.

Oliver

Just to update this thread, there are now slider controls to reduce the padding above and below the header masthead.

Oliver

Thanks for the feedback and for these new features. I didn’t manage to see the effect of the css code on my page, there must be some reason for it. I’m new to wordpress, sorry;)

css problem

colin

Works perfectly here!

Thank you!

Awesome. I’ll add a slider to increase the width of the header / masthead for @colintoup so that he doesn’t have to use CSS ??

Will let you know when that’s done.

Oliver

Sliders work very well. Thank you.

One minor quibble. With the bottom padding slider at 0 (zero) there is a bit of overlap with the page title on the iPhone screen.

We are not seeing that, are you sure it’s not some Additional CSS making that happen? Can you please remind me of your site and I’ll take a look.

Oliver

Take a look at pcphotoclub.org.

I have removed all additions in CSS.

While there please click the Theme tab in the menu to see the overbearing category title. I would like to just turn that off.

• This reply was modified 3 years, 10 months ago by ludwigkeck.

Hmm, I’m not sure why but your masthead doesn’t have any height (which is why the header is overlapping).

Try this for the meantime until I can work out what’s really going on …

.site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
position: relative;
}

The category title can be reduced in size using “Customizer – Content Options – Archive Title Font Size” (off the top of my head, may be called something slightly different).

Oliver

That works well.

Sorry I had overlooked the slider for Archive Title Font Size. That does the job!

To make my masthead as narrow (vertically) as possible I turned off (unchecked) Display Site Title & Tagline in Site Identity. I made the site name (name of club) part of the logo. That is now in 3 by 1 aspect ration, transparent except for the actual logo and text.

Your added CSS suggestion also takes care of the overlap on the iPhone screen.

Guess I should buy you another cup of coffee! Thanks!

• This reply was modified 3 years, 10 months ago by ludwigkeck.

Having a think about this, I think that if in “Customizer – Site Identity” you choose to hide the title and description, then at that point the CSS above is required to give the header some height.

I will add this logic into the plugin and update this thread accordingly.

Oliver

??????

OK, just pushed another update which fixes the above issue. The problem was caused by the header margin top … in mobile mode, the site requires this to give the header depth!

Also …

@colintoup … there is now an option in “Customizer – Header Options – Wide Site Header” which is what you were asking for in this original post.

Please let me know if it works for you.

Oliver

Hey Oliver.

Thanks it’s really nice. Just bought the premium version ??

May I suggest that the adjustment of the position of the menu and the logo be done with a slider? The checkbox “Wide Site” is great but it’s a little frustrating not being able to manage the margin with the edges of the screen.

All the best

Colin

Hi Colin,

Awesome ??

There is a reason for this … the margins need to change very slightly depending on the width of the screen in order for them to be equidistant from the corners.

I’ll look at replacing this with a slider and let you know when it’s done ??

Oliver

Hello again,

OK, so the default header max-width is set as follows …

.site-header {
max-width: calc(100vw - 2 x 15px);
}
@media only screen and (min-width: 482px) {
.site-header {
max-width: calc(100vw - 2 x 50px);
}
}
@media only screen and (min-width: 822px) {
.site-header {
max-width: calc(100vw - 2 x 100px);
}
}

… which effectively means that on small screens there is a margin on the left and the right of 15px. On medium screens this is 50px and on large screens this is 100px.

Currently our “Wide Site Header” switch just changes the left / right margins on medium and large screens to 19px to match the margin above the logo and site branding so that it sits equidistant from the top corner on larger screens.

So my question to you is, if we switched this to a slider, what would you like the slider to do exactly? What range of values would you like for the margin on the left and the right of the header on large screens?

Thanks,

Oliver