PalmetteHome Posted August 25, 2020 Posted August 25, 2020 Site URL: http://www.palmettehome.com I'd like to move my announcement bar to the very top of the page on mobile, the same as it appears on the desktop. Is this an option? Thanks!
tuanphan Posted August 26, 2020 Posted August 26, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .tweak-mobile-bar-top-fixed .Mobile-bar--top { top: 38px; } .sqs-announcement-bar-dropzone { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } } paolamc 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Beste Posted May 24, 2021 Posted May 24, 2021 This code works to move the announcement bar to the top of the page on mobile but now it's covering the logo and menu. Any ideas how to position the announcement bar at the top of the page without obscuring the logo and menu? Thanks!
tuanphan Posted May 24, 2021 Posted May 24, 2021 3 hours ago, Beste said: This code works to move the announcement bar to the top of the page on mobile but now it's covering the logo and menu. Any ideas how to position the announcement bar at the top of the page without obscuring the logo and menu? Thanks! Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tuanphan Posted May 26, 2021 Posted May 26, 2021 On 5/25/2021 at 10:44 AM, Beste said: https://www.besteogan.com/ It looks fine here. Can you keep the code in Custom CSS? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
S74 Posted September 29, 2021 Posted September 29, 2021 I'm having the same problem as Beste. The code works, but it's covering the logo and menu. The code is in custom CSS. I've attached two photos, one with the announcement bar and one without. I'm using the announcement bar only on this test home page for now: curtains2u.co.nz/home-new // Home page - Move Announcement Bar to top of mobile// @media screen and (max-width:640px) { .tweak-mobile-bar-top-fixed .Mobile-bar--top { top: 38px; } .sqs-announcement-bar-dropzone { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } }
tuanphan Posted October 2, 2021 Posted October 2, 2021 On 9/29/2021 at 9:39 AM, S74 said: I'm having the same problem as Beste. The code works, but it's covering the logo and menu. The code is in custom CSS. I've attached two photos, one with the announcement bar and one without. I'm using the announcement bar only on this test home page for now: curtains2u.co.nz/home-new // Home page - Move Announcement Bar to top of mobile// @media screen and (max-width:640px) { .tweak-mobile-bar-top-fixed .Mobile-bar--top { top: 38px; } .sqs-announcement-bar-dropzone { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } } Add to Design > Custom CSS /* Fix announcement bar cover logo on mobile */ .Mobile-bar.Mobile-bar--top { top: 55px !important; position: relative; z-index: 9999; } S74 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
mustardbeetle Posted April 14, 2022 Posted April 14, 2022 Hello! I used both codes to send the bar to the top of the page, and then to make sure it wasn't covering the logo and navigation. Unfortunately, now, it's almost like my navigation is below the navigation bar. You click on the little 3 lines and then they stay infront of the navigation text so you can't actually navigate to a different page. Again, this issue is only on mobile. My site is www.mustardbeetle.com
tuanphan Posted April 18, 2022 Posted April 18, 2022 On 4/14/2022 at 1:34 PM, mustardbeetle said: Hello! I used both codes to send the bar to the top of the page, and then to make sure it wasn't covering the logo and navigation. Unfortunately, now, it's almost like my navigation is below the navigation bar. You click on the little 3 lines and then they stay infront of the navigation text so you can't actually navigate to a different page. Again, this issue is only on mobile. My site is www.mustardbeetle.com Don't remove any code in your current code Add to Design > Custom CSS /* Mobile Announcement Bar */ @media screen and (max-width:767px) { .sqs-announcement-bar-dropzone { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; } div.Mobile-bar { margin-top: 50px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment