Site header is displaying on top of my content when i scroll
-
Also, I’m trying to make the vertical gap between the items in the header shorter like the menu and header image to name a few. I don’t like the gap between them as it pushes the unique page content down too far. Is it possible to reduce that hight a bit?
-
Thanks a lot for the screenshots! It helped to share additional contexts that were not present in your message.
From the screenshot, I see that you are trying to edit padding and margin on the paragraph of the page: “Fat and chubby chonky cat pics”. I tried updating the padding on the first paragraph block and it appears to be working. Here’s a screen recording: https://d.pr/v/ZMHdFx
Could you please try it on a computer instead of a mobile phone?
Also, I’m trying to make the vertical gap between the items in the header shorter like the menu and header image to name a few. I don’t like the gap between them as it pushes the unique page content down too far. Is it possible to reduce that hight a bit?
I do not see a huge vertical gap on the header. But I can see the Site Logo that you added to the header is pretty huge, which is why the content is being pushed down.
Have you considered reducing the size of the Site Logo in the header section? Currently, it has a width of 1206 px.
I think a width of 250px is big enough. Here’s a screenshot: https://d.pr/i/G7RjQ8
Let me know what you think.
-
-
it’s not working on my laptop in edge. I’ve also tried desktop view on crome mobile but the padding still won’t work. The margain works if i change it however.
-
If using the slider doesn’t seem to react, please try to enter a custom value and click outside of the input field to have that value apply. Please refer to this screen recording to guide you:
https://d.pr/v/gmKfOZ
The screen recording also demonstrates how to quickly copy & paste block styles between blocks so that you don’t have to do it manually for each paragraph. -
Hi @herad80651! You asked:
How to create a fixed/sticky header on scroll with CSS & JavaScript?
If you are using a recent theme that supports full site editing, additional coding is not required in order to set a sticky header.
Group blocks now support the option to set a “Sticky” position. You can refer to the “Position Settings” section of our our guide:
https://wordpress.com/support/wordpress-editor/blocks/group-block/#position-settings
-
it worked and the time saving paragraphs styles are appreciated. I was also able to change it on my phone with desktop mode activated, which is convenient. I’ve noticed differences on mobile and desktop view for the margins. They are set at 15px and look good on mobile but on desktop the margins look as though they might be at around 80. Is there a way to get the margins to look the same as mobile viewing when viewed on desktop?
-
Hi there!
Usually, themes will adjust certain values (for margins for example) due to responsiveness. (You can read more about it here)
Seeing as you have a premium plan, you can override this by adding the CSS code here under the Additional CSS section. You might want to work directly with a developer for the right CSS code but take into account that if you unify margins and settings what looks good on mobile might end up looking too narrow on desktop.
Best regards
-
ok, i might just leave it for now then. I’ve noticed in the editor that the bolded text of caturdaynightfeverworld.wordpress.com actually is able to span more than one line so that there’s no pushing the text outside the content area but when viewing the actual site on mobile it actually doesn’t do this and gets pushed outside that block. Is there a way to make that long address span as many lines as needed and not break outside its area on small screens?
-
-
sorry to add a few things at once but I’m ok with you getting to them when you can.
I’ve noticed that when i change headings like h2 and add padding and change the font size of the h2 that it works on some pages but not on others. Clicking out of the padding field for example will change these things in editor – pages view on screen but not when i view the page live.
Why does it work on this page https://caturdaynights.net/amazingly-beautiful-and-majestic-cat-pics/
But not on this page? https://caturdaynights.net/cute-cat-and-kitten-hd-mobile-phone-wallpapers/
-
Hi there!
Is it possible that there’s a local cache issue? The pages seem to recognize the padding from my end. Could you check it with another browser and see if the issue still appears on your end? And if so, could you share a screenshot of how it looks for you?
Best regards
-
It sounds like your site’s header is overlapping with your content when you scroll. You might need to adjust the CSS positioning of your header to ensure it stays fixed at the top of the page without overlapping the content. Check your CSS rules for the header and consider using
position: fixed;along with appropriate z-index values to resolve the issue. -
i got it working. Thanks
I’ve noticed in the editor that the bolded text of caturdaynightfeverworld.wordpress.com on the homepage actually is able to span more than one line so that there’s no pushing the text outside the content area but when viewing the actual site on mobile it actually doesn’t do this and gets pushed outside that block. Is there a way to make that long address span as many lines as needed and not break outside its area on small screens?
-
I’ve noticed in the editor that the bolded text of caturdaynightfeverworld.wordpress.com on the homepage actually is able to span more than one line so that there’s no pushing the text outside the content area but when viewing the actual site on mobile it actually doesn’t do this and gets pushed outside that block
Indeed, I see what you mean.
This is a known issue that was reported to our developers.
While our team looks into this, using linked text is the best thing to do.
Developer reports are addressed on severity. An immediate fix is unlikely as this is a particular issue, and there is a simple solution.
WordPress.com Forums 