[Resolved] Header & top bar background semi transparent on scroll using sticky command

[Dominique]

Hi,

After applying PHP & CSS in https://docs.generatepress.com/article/header-examples/#example-8 how do I reduce the distance between the logo / menu & header widget. Essentially, I want to reduce the top padding or top margin of the header widget. Can’t find what is pushing it down after inspecting.

Please advise.

[Dominique]

In mobile only 🙂

[Dominique]

Sorry & tablet.

[Elvin]

After applying PHP & CSS in https://docs.generatepress.com/article/header-examples/#example-8 how do I reduce the distance between the logo / menu & header widget. Essentially, I want to reduce the top padding or top margin of the header widget. Can’t find what is pushing it down after inspecting.

Not exactly sure what you mean. Can you provide images with indication on?

Are you pertaining to the space highlighted in orange on this video?
[Redacted as requested by owner]

If so, that’s caused by a margin-left: auto; property added to the .mobile-menu-control-wrapper on one of your CSS files. But I can’t pinpoint which because it is merged on a cached stylesheet file.

Removing this won’t help though. The header widget is being pushed down because there is not enough horizontal space on some mobile viewports to fit the logo, the menu hamburger and the header widget all in one row so the header widget is being wrapped to the next line.

What you have to change in order for all of them to fit on one row on mobile header is this CSS on your Appearance > Customize > Additional CSS:

@media (max-width: 768px)
.primary-navigation-wrapper {
    flex-basis: 100%;
}

You can completely remove this so all of the content within the header will fit in a row as shown here:
[Redacted as requested by owner]

[Dominique]

Hi,

We will focus on mobile so 768px and below. Since I have weird breakpoints in tablet so the menu doesn’t wrap and I force it to mobile menu at 1250px

It’s not the distance in orange that you are referring to. I inspected .textwidget & aside#text_icl-31.widget.inner-padding.wiget_text_icl & .header-widget & .primary-navigation-wrapper essentially the one underneath the orange one you are referring to. The header widget with opening hours and the two buttons. I want to remove the padding top or margin top to bring it up closer to the site logo and menu.

Refer to the original site in the private information. On the original site everything is centered in each flex container that would be a bonus. Essentially the top bar with less height keeping the same layout.

In order to bypass all minification, concatenation, critical path CSS, caching & lazy loading end the ip address with /?nowprocket

Please advise.

[Dominique]

Sorry replace “Essentially the top bar with less height keeping the same layout.” with -> Essentially the site header or masthead with less height keeping the same layout.

[Dominique]

I think it has something to do with the hidden site title.

[Elvin]

It’s not the distance in orange that you are referring to. I inspected .textwidget & aside#text_icl-31.widget.inner-padding.wiget_text_icl & .header-widget & .primary-navigation-wrapper essentially the one underneath the orange one you are referring to. The header widget with opening hours and the two buttons. I want to remove the padding top or margin top to bring it up closer to the site logo and menu.

For this one, the issue is the default line-height being added to <a> tags which pushes the header widget down.

Adding this CSS should address some of the “space” added:

.site-logo a {
    line-height: 0;
}

You can see in this video that toggling the line-height affects the space between the first row and the next row of the header contents:
[Redacted as requested by owner]

If you want to decrease the space even further, consider cropping the logo more tightly as its “breathing space” also adds up to the perceived space between the first and second row.

Refer to the original site in the private information. On the original site everything is centered in each flex container that would be a bonus. Essentially the top bar with less height keeping the same layout.

Your original site has a significantly different DOM structure. It uses Elementor with mobile viewport columns set to 33% each.

While we can attempt to copy the exact layout with CSS, there will be some limitations. You may have to re-arrange how the header widget contents are placed so they wrap nicely when we change viewports.

If I may suggest, if you want your header to behave in a visually balanced manner similar to this: [Redacted as requested by owner]

I’d add justify-content: space-evenly; property to the .has-inline-mobile-toggle .inside-header selector and remove the margin-left:auto; added on .nav-float-right .primary-navigation-wrapper and .mobile-menu-control-wrapper selectors to let the browser compute the proper center and spacing between the row elements.

[Dominique]

Hi,

I saw that it was in the site logo & couldn’t figure it out. Line Height!!!

Thanks

As for the rest adding and removing. Unfortunately, I am only taking my baby steps in this whole CSS thing. I have no idea how to remove. I know how to add CSS though 🙂 I know how to remove padding & margin by changing the values. Removing is above my knowledge for now.

Do you have a copy paste solution please?

[Dominique]

Removing margin-left:auto; would mean changing the value to something but what?

[Dominique]

margin-left: unset; 🙂

[Elvin]

As for the rest adding and removing. Unfortunately, I am only taking my baby steps in this whole CSS thing. I have no idea how to remove. I know how to add CSS though 🙂 I know how to remove padding & margin by changing the values. Removing is above my knowledge for now.

Any chance you can disable the caching plugins again? So I can point you to which source to edit?

I believe most of the selectors I’ve mentioned are manually added through Appearance > Customize > Additional CSS but I can’t really be sure because caching plugins change the original source.

You just have to find the selectors and remove the properties I’ve mentioned as we can’t simply just keep pasting CSS as it’s bad housekeeping especially when the selectors being re-added already exists.

Edit: for margin-left:auto;, yes you can set it to unset or completely remove the property.

[Dominique]

Hi,

You simply have to add /?nowprocket to the ip address to bypass cache.

You have full access and administrative rights to the site. I have no issues with you disabling WP Rocket. Just turn in back on after. I don’t think it’s necessary. I never turn it off.

I added the recommendations, and it works perfectly. This is the whole CSS for the header layout:

/* CSS for header layout - php needed in snippets */

.nav-float-right .primary-navigation-wrapper {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 768px) {
	.primary-navigation-wrapper {
		flex-basis: 100%;
	}   
	.site-header .header-widget {
		margin-top: 0px;
	}
}

.has-inline-mobile-toggle .inside-header {
	justify-content: space-evenly;
}

.nav-float-right .primary-navigation-wrapper {
	margin-left:unset;
}

.mobile-menu-control-wrapper {
	margin-left:unset;
}	

/* END CSS for header layout - php needed in snippets */

I do see one redundant margin-left:auto; for .nav-float-right .primary-navigation-wrapper that is unset after. That is as far as I can go for good house keeping that will also prevent cumulative layout shift.

Any other modifications?

[Elvin]

I do see one redundant margin-left:auto; for .nav-float-right .primary-navigation-wrapper that is unset after. That is as far as I can go for good house keeping that will also prevent cumulative layout shift.

Any other modifications?

That’s pretty much it for the layout changes.

As for the CLS issue, the biggest offender seems to be the featured image(0.451)
[Redacted]

It’s simply too huge. The file size is too heavy. Consider using image optimization plugins (if you’ve yet to use one) or simply reupload an image of a smaller file size.

And actually, all of the CLS flags are related to your images. These things are outside of the theme’s control and are usually settled w/ image optimization plugins or proper file sizes.

[Dominique]

Hi,

On desktop any Cumulative Layout Shift is new. It wasn’t there today.

Already have Imagify to optimize images & it’s supposed to be loaded by the browser using SCRSET. I generate enough picture sizes to accommodate all screen sizes from 8K down.

I will figure it out. There is no issue on another page with the same layout. A bug of some sort…

With the cache enabled the CLS is all in the header 😉

For privacy, can you please remove the above link and anything above that can be visualized externally.

Thank you for your help it’s greatly appreciated.

[Author]

Posts