XianNewman Posted May 17, 2021 Share Posted May 17, 2021 Site URL: https://risedigital.tech Hey Squarespacers! I installed a Google Review badge on my site, which presents a problem with the nav button in the mobile menu (7.1). Not sure if the best approach is to try and remove the badge when mobile menu opens, or move the button up so it's not covered by the badge (I think I prefer the latter). Any bright ideas how to fix this with CSS? Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
Agha_Waqas Posted May 17, 2021 Share Posted May 17, 2021 3 hours ago, XianNewman said: Site URL: https://risedigital.tech Hey Squarespacers! I installed a Google Review badge on my site, which presents a problem with the nav button in the mobile menu (7.1). Not sure if the best approach is to try and remove the badge when mobile menu opens, or move the button up so it's not covered by the badge (I think I prefer the latter). Any bright ideas how to fix this with CSS? add below code into css editor @media (max-width: 1024px){ #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;} } tuanphan 1 Link to comment
XianNewman Posted May 17, 2021 Author Share Posted May 17, 2021 40 minutes ago, Agha_Waqas said: add below code into css editor @media (max-width: 1024px){ #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;} } That worked beautifully, thank you! CSS newbie question: Is the intention of the z-index value to set the relative depth of an object on a page? Also, curious why you used max-width: 1024px as I've seen many use 767px as the mobile threshold. Christian Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
Agha_Waqas Posted May 17, 2021 Share Posted May 17, 2021 3 minutes ago, XianNewman said: That worked beautifully, thank you! CSS newbie question: Is the intention of the z-index value to set the relative depth of an object on a page? Also, curious why you used max-width: 1024px as I've seen many use 767px as the mobile threshold. Christian Your welcome. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. i used the max-width: 1024px is because your mobile navigation is start from there, if we only do this for mobile just then the issue will still remain for the tablet and ipads users. tuanphan 1 Link to comment
XianNewman Posted May 21, 2021 Author Share Posted May 21, 2021 54 minutes ago, tuanphan said: @XianNewman I see your site has some problems. Do you need to fix these? Site URL – https://risedigital.tech/ 1. (Tablet-Homepage) Increase text width a bit? 2. (Mobile-Footer) Align center logos or make them side by side? 3. (Tablet-About) Change to 2 columns? 4. (Tablet-About) Increase text width? 5. (Tablet-Google Workspace) Increase text width a bit? 6. (Tablet-Web Design) Change to 2 columns? 7. (Tablet-Podcast) Change to 2 items/row? 8. (Tablet-Podcast posts) Increase text width? Thanks for the feedback. All of these are automatically formatted by Squarespace. 2. I meant for them to be centred. 1, 3-8. All of these are automatic responsive adjustments by Squarespace. In mobile, desktop, and tablet landscape, they look good. In tablet portrait, not so good. Any recommendations to fix without messing up desktop styles? Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
tuanphan Posted May 22, 2021 Share Posted May 22, 2021 On 5/21/2021 at 11:59 AM, XianNewman said: Thanks for the feedback. All of these are automatically formatted by Squarespace. 2. I meant for them to be centred. 1, 3-8. All of these are automatic responsive adjustments by Squarespace. In mobile, desktop, and tablet landscape, they look good. In tablet portrait, not so good. Any recommendations to fix without messing up desktop styles? Add to Design > Custom CSS. If it works, let me know. We will check other questions /* Tablet */ @media screen and (max-width:1024px) and (min-width:768px) { /* q1. homepage banner */ [data-section-id="6098017816396460ff8f7ea5"] .content { width: 70% !important; } /* q3. about 2 columns */ div#block-b1455df1fb8a28d4d014+.row>.span-3:nth-child(-n+2) { width: 50%; } div#block-b1455df1fb8a28d4d014+.row>.span-6 { width: 100%; } /* q4. about banner text */ [data-section-id="5f926682a85f076f863e2ae8"] .content { width: 70% !important; } /* q5. Google workspace */ [data-section-id="609998f1f93ae5050fa14a32"] .content { width: 90% !important; } } 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!) Link to comment
XianNewman Posted May 22, 2021 Author Share Posted May 22, 2021 14 hours ago, tuanphan said: Add to Design > Custom CSS. If it works, let me know. We will check other questions /* Tablet */ @media screen and (max-width:1024px) and (min-width:768px) { /* q1. homepage banner */ [data-section-id="6098017816396460ff8f7ea5"] .content { width: 70% !important; } /* q3. about 2 columns */ div#block-b1455df1fb8a28d4d014+.row>.span-3:nth-child(-n+2) { width: 50%; } div#block-b1455df1fb8a28d4d014+.row>.span-6 { width: 100%; } /* q4. about banner text */ [data-section-id="5f926682a85f076f863e2ae8"] .content { width: 70% !important; } /* q5. Google workspace */ [data-section-id="609998f1f93ae5050fa14a32"] .content { width: 90% !important; } } Ahhhh.... I see what you're doing here. Just installed the code and am testing it out. So far, so good! Do you think I should I adjust all the banner text to the same width for consistency? Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
tuanphan Posted May 24, 2021 Share Posted May 24, 2021 On 5/23/2021 at 6:18 AM, XianNewman said: Ahhhh.... I see what you're doing here. Just installed the code and am testing it out. So far, so good! Do you think I should I adjust all the banner text to the same width for consistency? Not sure. I'm not good at UI/UX You can consider, if you need to change, let me know, we will check & give the code 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!) Link to comment
geearias Posted January 3, 2022 Share Posted January 3, 2022 On 5/17/2021 at 3:03 PM, Agha_Waqas said: add below code into css editor @media (max-width: 1024px){ #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;} } I have similar issue. See screenshot. www.beautifeyehtx.com Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 19 hours ago, geearias said: I have similar issue. See screenshot. www.beautifeyehtx.com You can move up button with this CSS /* Mobile menu button */ .header-menu-cta { position: relative; top: -50px; } LogikEvidence 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!) Link to comment
geearias Posted January 4, 2022 Share Posted January 4, 2022 1 hour ago, tuanphan said: You can move up button with this CSS /* Mobile menu button */ .header-menu-cta { position: relative; top: -50px; } Worked! Thank you @tuanphan Link to comment
KerriW Posted February 3, 2023 Share Posted February 3, 2023 DO you know how to move the social buttons up as well? Thanks Link to comment
tuanphan Posted February 8, 2023 Share Posted February 8, 2023 On 2/4/2023 at 4:37 AM, KerriW said: DO you know how to move the social buttons up as well? Thanks What is your site url? We can check social buttons code 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!) Link to comment
LogikEvidence Posted March 9, 2023 Share Posted March 9, 2023 On 1/4/2022 at 1:44 PM, tuanphan said: You can move up button with this CSS /* Mobile menu button */ .header-menu-cta { position: relative; top: -50px; } Thank you for this code! Worked on my website 🙂 Link to comment
elenaouterloop Posted April 30, 2023 Share Posted April 30, 2023 Hi-- similar issue on my site (outerlooptheater.org) I would prefer if the donate button were not visible on the mobile menu. Thank you in advance for your help! Link to comment
tuanphan Posted May 1, 2023 Share Posted May 1, 2023 14 hours ago, elenaouterloop said: Hi-- similar issue on my site (outerlooptheater.org) I would prefer if the donate button were not visible on the mobile menu. Thank you in advance for your help! Add to Design > Custom CSS body.header--menu-open a[href="/donate"] { display: none; } 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!) Link to comment
XianNewman Posted January 27 Author Share Posted January 27 On 5/17/2021 at 1:03 PM, Agha_Waqas said: add below code into css editor @media (max-width: 1024px){ #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;} } Hi! This fix is no longer working on my site. Any idea how I can get it working again? Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
tuanphan Posted January 30 Share Posted January 30 On 1/28/2024 at 12:05 AM, XianNewman said: Hi! This fix is no longer working on my site. Any idea how I can get it working again? Add this code to Custom CSS box div.header-menu-cta { position: relative; top: -200px; } 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!) Link to comment
XianNewman Posted January 30 Author Share Posted January 30 6 hours ago, tuanphan said: Add this code to Custom CSS box div.header-menu-cta { position: relative; top: -200px; } Thanks @tuanphan... I see you offered a different fix (moving the button). Good to know there's another option! Is the z-index fix (hiding the widget) no longer available on Squarespace? Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
tuanphan Posted February 1 Share Posted February 1 On 1/30/2024 at 11:24 PM, XianNewman said: Thanks @tuanphan... I see you offered a different fix (moving the button). Good to know there's another option! Is the z-index fix (hiding the widget) no longer available on Squarespace? How do you want to handle it? 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!) Link to comment
XianNewman Posted February 2 Author Share Posted February 2 21 hours ago, tuanphan said: How do you want to handle it? I wanted to hide it when mobile menu is displayed (using z-index), which used to work, but doesn't work anymore. Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
tuanphan Posted February 5 Share Posted February 5 Use this CSS code body.header--menu-open div.header-menu-cta { opacity: 0 !important; display: none !important; visibility: hidden !important; z-index: -100 !important; } 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!) Link to comment
XianNewman Posted February 7 Author Share Posted February 7 On 2/4/2024 at 6:05 PM, tuanphan said: Use this CSS code body.header--menu-open div.header-menu-cta { opacity: 0 !important; display: none !important; visibility: hidden !important; z-index: -100 !important; } This hides the CTA button from the mobile menu, which I definitely don't want to do. I want to hide the Google Reviews widget from the mobile menu... which this code snippet used to do, but doesn't anymore: @media (max-width: 1024px){ #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;} } Rise Digital | Google Workspace Partners We make companies more productive, with Google Workspace.Let's connect on LinkedIn Link to comment
tuanphan Posted February 11 Share Posted February 11 With Google Reviews, use this CSS code body.header--menu-open [id*="eapps-google-reviews"] { opacity: 0 !important; display: none !important; visibility: hidden !important; z-index: -100 !important; } 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment