Site header is displaying on top of my content when i scroll
-
The title explains the first issue im having.
I also need help with the following:
I need to make the site logo bigger on desktop viewing. (It’s fine on mobile)
The menu needs to be above the site logo (works fine on mobile)
I have a bolded text on the page which runs off the main content area a bit (both mobile and desktop)
Is it possible to change the background colour of the page background? Not the bone colour of the main content area.
Is it possible to make the text sit a bit higher as there’s a several line worth of a gap between it and the top of the cream colour content area.
Is it possible to make the distance between the items in the header less as the whole header takes up most of the screen.
whoa sorry about all this
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Site header is displaying on top of my content when i scroll
It looks like your header is currently set to “Sticky” which will make it remain at the top when scrolling. From your WordPress.com Dashboard you can go to Appearance ⇢ Editor then choose Templates, then Pages, to undo this. I made an annotated screenshot of the steps and I’ll detail them below.
- Click the three off-center lines icon in the upper left to open the list view.
- Select the group block at the top. You can see that it is set to sticky because of the thumbtack icon next to it.
- Switch Position in the column on the right from Sticky to Default.
I need to make the site logo bigger on desktop viewing. (It’s fine on mobile)
You can change the size of the logo here:
It will be up to the theme how to resize the theme for different browsers so you may want to change the size, check on how that looks on multiple browsers, and make adjustments as needed.
The menu needs to be above the site logo (works fine on mobile)
Right now, your header items are in a “Contents” block which gives your theme a lot of leeway for choosing how things are laid out on different screen sizes, to give it more guidance, you may want to change that to a row, column, or stack block. These are all container blocks but the row and column blocks both lay things out horizontally, unless they don’t fit horizontally on the screen size being used to view it, in which case it stacks them. The stack block automatically stacks blocks vertically. These can be used in combination with each other to create the kind of mobile-responsive design you’re looking for.
Let us know if there’s anything else we can help with.
-
I also need help with these:
I have bolded text on the page which runs off the main content area a bit (both mobile and desktop)
Is it possible to change the background colour of the page background? Not the bone colour of the main content area.
Is it possible to make the text sit a bit higher as there’s a several line worth of a gap between it and the top of the cream colour content area.
Is it possible to make the distance between the items in the header less as the whole header takes up most of the screen
-
-
I have bolded text on the page which runs off the main content area a bit (both mobile and desktop)
Is it possible to make the text sit a bit higher as there’s a several line worth of a gap between it and the top of the cream colour content area.
Is it possible to make the distance between the items in the header less as the whole header takes up most of the screen
And the space between the header and the content area
With each of these it seems like you’re trying to adjust the padding and margin of certain blocks. You can select the block and in the block settings add a setting for the padding and/or margin with the steps below:
You can adjust the padding and margin until they look right.
Is it possible to change the background colour of the page background? Not the bone colour of the main content area.
I’m not certain I understand, I’m not seeing a bone colour, but if you’re referring to changing the background color for all your pages, you can do that using Styles, which you can view some documentation on here: https://wordpress.com/support/using-styles/
There you can choose the default page background color, as well as setting a default color, layout and typography for your block. Check out that documentation for some great tips on getting started with that!
-
I’ve tried this but it says i need premium styles. Can you purchase premium styles on it’s own or is there another way to do it free?
-
-
is it also possible to have the menu and the social buttons on the same line horizontal but the search bar and logo vertical like they are?
-
is it also possible to have the menu and the social buttons on the same line horizontal but the search bar and logo vertical like they are?
Absolutely! By default, the regular Group block will “stack” its elements vertically but you can set it to work as Row instead to make elements stay within the same line.
also i changed it from sticky but it’s still doing it
You need to set the top-level block as “sticky” for this to work.
I’ve tried this but it says i need premium styles. Can you purchase premium styles on it’s own or is there another way to do it free?
You can make styling changes to individual pages and post in all plans but if you want to apply these changes to all your sections using the Site Editor, you will need to upgrade to an Explorer (Premium) plan or above.
-
-
-
I’ve spent and hour trying to get the menu and social icons on the same line but i cannot get it working, is there something I’m doing wrong?. I’m also thinking I’d like to have the search bar on the same line as the menu and socials.
-
-
the padding and margin will not change the text position even in the pages menu under editor
-
-
-
Hi there,
The Row block can be used to place other blocks in the same line. Currently, the Navigation block and the Social Icons block are in two separate Row blocks on your site.
Kindly move the Social Icons block to the Row block containing the Navigation block. You can refer to this guide: https://wordpress.com/support/wordpress-editor/select-and-move-blocks/ about moving blocks.
also i changed it to default but it’s still floating over content
I’m sorry to hear that the header is still floating despite changing the block position settings to “Default”. To investigate this further, may we try from our end?
I see that you are also facing issues with margin, padding, and adjusting space between headings and paragraphs. To avoid confusion by trying to address all issues in one reply, let us focus on one issue at a time.
May we try adjusting the settings of the block to investigate the floating behavior issue?
Regards,
-
-
Thanks!
I have investigated and found that the Header block was inside a Group block that was set as sticky on the Pages template. It was being used for the home page. Here’s a screenshot: https://d.pr/i/azTtxa
I have disabled it to resolve the sticky position issue. Please check the site again.
You can manage the templates from Appearance > Editor > Templates. Here’s a guide: https://en.support.wordpress.com/templates/edit-a-template/
Regarding the next issue,
the padding and margin will not change the text position even in the pages menu under editor sorry i mean pages menu
Could you please share a screenshot of the section you are referring to? I tried to review the previous notes, but I am not 100% sure I understood the issue.
The page at the following link has some helpful tips for taking screenshots: http://en.support.wordpress.com/make-a-screenshot/
-
awesome, much better.
when i change the padding on my paragraphs in the page editor, it doesn’t affect the text at all.
WordPress.com Forums 