Jump to content

Mobile navigation menu

Recommended Posts

Hi, I want my site's primary navigation buttons to appear behind a menu on mobile, which they do when I load the site on my phone.

image.thumb.png.a57ccd1b1cec01a47e14f2eec092de48.png

image.thumb.png.743a5ce4a047fc349e673c7213cfd8bf.png

 

But when my colleague loads the site on this phone, the titles appear above the main content. 

image.thumb.png.4979981f0573d3229281fb25a900ec84.png

Any ideas why this is?

Edited by AlissaHirsh
Made a mistake
Link to comment
  • Replies 12
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...

Hi @tuanphan on our new client's home page we have a hero image above the navigation, but would like the logo to stay in the top left when the site is viewed on mobile and nav icon is selected. The nav looks great on mobile, on all the other pages except the home page since we added the hero to the top of that one. Below are the screenshots for reference as well as the link and the password to view the site. Let me know if you have any questions. Thank you!
https://penguin-toucan-s42t.squarespace.com/

Password: DoveLove2023!

Screenshot 2023-02-03 at 4.09.18 PM.png

Screenshot 2023-02-03 at 4.09.07 PM.png

Screenshot 2023-02-03 at 4.08.59 PM.png

Link to comment
On 2/4/2023 at 5:17 AM, Dovely2023 said:

Hi @tuanphan on our new client's home page we have a hero image above the navigation, but would like the logo to stay in the top left when the site is viewed on mobile and nav icon is selected. The nav looks great on mobile, on all the other pages except the home page since we added the hero to the top of that one. Below are the screenshots for reference as well as the link and the password to view the site. Let me know if you have any questions. Thank you!
https://penguin-toucan-s42t.squarespace.com/

Password: DoveLove2023!

Screenshot 2023-02-03 at 4.09.18 PM.png

Screenshot 2023-02-03 at 4.09.07 PM.png

Screenshot 2023-02-03 at 4.08.59 PM.png

Hi,

Move this?

image.png.61e7e49f47ef4604d354742883737d86.png

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
On 2/6/2023 at 9:58 PM, Dovely2023 said:

Hi @tuanphan yes on mobile and desktop. For some reason the preview in the Squarespace editor looks better than the actual preview in a separate window. Let me know if you have any other questions. Thank you! 

You have this code, change 650px to 0px

image.png.09c0c35b55ea786c4d77b12d8af2c364.png

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

Hi @tuanphan if I do that it pushes the navigation bar back up to the top instead of keeping the hero image first. Is there a way to have the hero image be first but when someone clicks the menu the logo goes backs up to the left corner? So instead of the first screenshot the home page menu would display like the other page menus? Let me know if you have any questions. Thank you.

Good.png

Bad.png

Link to comment
12 hours ago, Dovely2023 said:

Hi @tuanphan just following up on this. Thank you!

I think possible, when overlay menu is open, body has a new id, we can target it. Your site is expired. You can access this link to extend it for free

 

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
16 hours ago, Dovely2023 said:

Yes, thank you @tuanphan. We've extended it. If you could help us figure out how to target it, that would be great. Thank you again.

Add to Design > Custom CSS

body.header--menu-open header#header {
    top: 0 !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

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.