Steven_McFarlane Posted June 21, 2020 Share Posted June 21, 2020 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. Link to comment
Beyondspace Posted June 21, 2020 Share Posted June 21, 2020 How to turn on the Announcement bar to check? You can use padding-top to move down the page content while the bar displaying BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Steven_McFarlane Posted June 22, 2020 Author Share Posted June 22, 2020 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? Link to comment
Steven_McFarlane Posted June 22, 2020 Author Share Posted June 22, 2020 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. Link to comment
Beyondspace Posted June 22, 2020 Share Posted June 22, 2020 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Steven_McFarlane Posted June 22, 2020 Author Share Posted June 22, 2020 Possible workaround? Anyone with code knowledge let me know if this looks correct? Quote .header { z-index: 10; position: static; } #page {margin-top:-95px} Link to comment
Steven_McFarlane Posted June 22, 2020 Author Share Posted June 22, 2020 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. Link to comment
Beyondspace Posted June 22, 2020 Share Posted June 22, 2020 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! BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Steven_McFarlane Posted June 22, 2020 Author Share Posted June 22, 2020 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;} Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.