Header image covering first post

Sparkling
1

Hello All,

I’ve been playing about with this theme (which I really like thank you) but the header and menu bar are covering the first post. Originally this was just Chrome and IE was ok but now it is both browsers.

I’ve added #content { margin-top: 50px; } in the custom CSS area but it doesn’t seem to be working.

I’ve also tried a few of the other container id’s but without success so far.

Any help would be great!

the site is live at www.numberonepokies.com/blog/index.php

I also wanted the sidemenu (postioned on the right) to float down the page as the user scrolls through the posts. Is this possible please?

Many thanks for your help with this.

Tom

2

Hi Tom,

I hope you are well today and thank you for your questions.

I’ve been playing about with this theme (which I really like thank you) but the header and menu bar are covering the first post.

I visited your shared site and the first post is displaying fine on it as shown in the attached screenshot.

I also wanted the sidemenu (postioned on the right) to float down the page as the user scrolls through the posts. Is this possible please?

It’s scrolling for me when i tested it on your site.

Have you managed to achieve it?

Please advise.

Kind Regards,
Movin

3

Ho Movin

Many thanks for your reply! It is a strange one as sometimes the header is loading correctly and at other times it seems to load after the blog posts have appeared and then covers the first post. I have attached a scrn shot from Chrome below. It seems to be the same problem in IE.

As for the side menu, I’d like it to remain visible at the side while the viewer scrolls through the posts rather than the whole pages scrolling up out of view.

Hope this makes sense? And thanks for your help with this :slight_smile:

Tom

4
Many thanks for your reply! It is a strange one as sometimes the header is loading correctly and at other times it seems to load after the blog posts have appeared and then covers the first post. I have attached a scrn shot from Chrome below. It seems to be the same problem in IE.

You can try resolving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


body.blog #masthead {
    margin-bottom: 364px;
}
As for the side menu, I’d like it to remain visible at the side while the viewer scrolls through the posts rather than the whole pages scrolling up out of view.

I am not sure what you meant by “scrolls through the posts” so please describe it a bit more in detail.

5

Hi Movin

Thanks for your reply, I’ve been working on a solution. I tried to implement the fix you suggested but it actually made the behaviour more erratic so I have reverted to the original custom code: #content { margin-top: 50px; }

The header still covers the posts intermittently though which I’d like to fix. Do you have any other ideas please?

Thanks

Tom

6

PS I think this may be to do with the use of ::before on one of the containers?

Thanks

Tom

7
Thanks for your reply, I’ve been working on a solution. I tried to implement the fix you suggested but it actually made the behaviour more erratic

The provided solution is working fine for me.

Could you please share me the screenshot of the issue you face when you use the provided CSS solution?