Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Move button in mobile menu


XianNewman

Question

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? 

IMG_DA0C7C930D6D-1.jpeg

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment

8 answers to this question

Recommended Posts

  • 0
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? 

IMG_DA0C7C930D6D-1.jpeg

add below code into css editor

@media (max-width: 1024px){
#eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;}
}

Link to comment
  • 0
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

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • 0
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.

Link to comment
  • 0

@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?

risedigital.tech-01-min.png

2. (Mobile-Footer) Align center logos or make them side by side?

risedigital.tech-02-min.png

3. (Tablet-About) Change to 2 columns?

risedigital.tech-03-min.png

4. (Tablet-About) Increase text width?

risedigital.tech-04-min.png

5. (Tablet-Google Workspace) Increase text width a bit?

risedigital.tech-05-min.png

6. (Tablet-Web Design) Change to 2 columns?

risedigital.tech-06-min.png

7. (Tablet-Podcast) Change to 2 items/row?

risedigital.tech-07-min.png

8. (Tablet-Podcast posts) Increase text width?

risedigital.tech-08-min.png

Link to comment
  • 0
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?

risedigital.tech-01-min.png

2. (Mobile-Footer) Align center logos or make them side by side?

risedigital.tech-02-min.png

3. (Tablet-About) Change to 2 columns?

risedigital.tech-03-min.png

4. (Tablet-About) Increase text width?

risedigital.tech-04-min.png

5. (Tablet-Google Workspace) Increase text width a bit?

risedigital.tech-05-min.png

6. (Tablet-Web Design) Change to 2 columns?

risedigital.tech-06-min.png

7. (Tablet-Podcast) Change to 2 items/row?

risedigital.tech-07-min.png

8. (Tablet-Podcast posts) Increase text width?

risedigital.tech-08-min.png

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?

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • 0
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;
}
}

 

Link to comment
  • 0
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?

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • 0
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...