Announcement Bar Issue

Site URL: https://www.stevenmcfarlane.design

Hey all!

I seem to be having trouble with my announcement bar. It seems to be pushing my header down over my content below, is there anyway to have the announcement bar push the whole site down instead instead of just pushing down the heading?

Attached some examples showing the issue with and without announcement bar.

How to turn on the Announcement bar to check? You can use padding-top to move down the page content while the bar displaying

6 hours ago, bangank36 said:

How to turn on the Announcement bar to check? You can use padding-top to move down the page content while the bar displaying

Hey! I will turn the announcement bar on to show you what's happening. I will try adding a padding top to the announcement bar with css.

Any help with the code would be great?

I tried padding top & bottom but again its just pushing the header of my site over the content below?

I assume its to do with the display settings or positions settings of the header but I am not knowledgeable enough to work out what to change.

25 minutes ago, Steven_McFarlane said:

I tried padding top & bottom but again its just pushing the header of my site over the content below?

I assume its to do with the display settings or positions settings of the header but I am not knowledgeable enough to work out what to change.

I saw the bar now, will update accordingly

Possible workaround? Anyone with code knowledge let me know if this looks correct?
 

Quote

 

.header {
    z-index: 10;
    position: static;
}

#page {margin-top:-95px}

 

1 minute ago, bangank36 said:

I saw the bar now, will update accordingly

Hey mate!

I think i solved it, can you see my post above and see the site now? Does this make sense? I pushed the page up by 95px as this was the original size of the header and when I changed it to static it moved everything down by 95px.

1 minute ago, Steven_McFarlane said:

Hey mate!

I think i solved it, can you see my post above and see the site now? Does this make sense? I pushed the page up by 95px as this was the original size of the header and when I changed it to static it moved everything down by 95px.

Seems correctly, the header is move along with the bar placement, glad you figure it on your own!

1 hour ago, bangank36 said:

Seems correctly, the header is move along with the bar placement, glad you figure it on your own!

 

Hey! Thanks for your response. I have noticed one more issue which is really annoying! For some reason on my android phone in chrome browser, the header is still overlapping, most other browsers seems to work fine, and tested it elsewhere it looks correct. Is there a reason why this might be & a way to fix it?

This is most noticable on the downloads sections www.stevenmcfarlane.design/downloads

A way to recreate the problem is with firefox inspect content and make it the iphone X version. (some of the other do)

edit: I have a temporary fix in place by using the below, but im sure there must be a better way to do this and make the padding at the top similar for all mobile sizes? Im not even sure max-width 500px is a good choice as I am a extreme begginner in css.

Quote

 @media only screen and (max-width: 500px) 

#page {margin-top:-75px;}