Jump to content

Adjusting Mobile Menu and Submenu Alignment and Spacing on 7.1

Recommended Posts

Site URL: http://www.buttercup-chartreuse-ptns.squarespace.com

Hello! I am building a site using version 7.1. I finally worked through the desktop navigation menu and now I'm stuck with changing the style of the mobile menu. 

The spacing and alignment's looks very disorganized. I don't know why the font of third menu item Plans is so much bigger than the other two, and the back button is separated from the arrow into two lines.

The first image is what it looks like right now, and the second one is how I want it to look. Having all the menu and submenu items align with the logo to the left, change the spacing and font size. And maybe change the font color of the submenu item when its clicked.

It'd be greatly appreciated if anyone can help me with this css.

The link to my site is here: buttercup-chartreuse-ptns.squarespace.com

Asset 64@2x.png

WeChat24b94aed5417244383bfbd20078a45f4.png

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-menu.header-menu--folder-list {
    text-align: left;
}
.header-menu-nav-folder-content {
    justify-content: flex-start;
}
.container.header-menu-nav-item {
    padding-left: 1vw;
}
.header-menu-nav-folder[data-folder="root"] {
    height: auto !important;
    min-height: unset !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
6 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.header-menu.header-menu--folder-list {
    text-align: left;
}
.header-menu-nav-folder-content {
    justify-content: flex-start;
}
.container.header-menu-nav-item {
    padding-left: 1vw;
}
.header-menu-nav-folder[data-folder="root"] {
    height: auto !important;
    min-height: unset !important;
}
}

 

This worked!! Do you know how I can change the font size and padding of the menu item selection page?

Link to comment
  • 1 year later...
On 12/23/2021 at 9:41 PM, DevonHarris said:

hey @tuanphan do you know how to get the arrow right-aligned?  I tried

.chevron--down{
float: right !Important;
}

but nothing happened 😞. Also is there a way to reduce it's size?  Idk why my code isn't working, hopefully you can help, thanks!!!!  

Can you share site url? We can check arrow easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

Hi there @tuanphan,

I've got a similar questions for my mobile menu. 

All nav items are set to a padding of 5 vw, but I want the distance to the header button ("Book Online") to be the same on all mobile devices so it looks like all of the other menu items. When I check the developer tool, the menu / space between nav items and nav button are different.

How can I fix this?  Any help is appreciated. 

URL: http://www.mauicustomcharters.com

 

Screen Shot 2022-01-10 at 4.16.48 PM.png

Link to comment
On 1/11/2022 at 9:17 AM, MariaFY said:

Hi there @tuanphan,

I've got a similar questions for my mobile menu. 

All nav items are set to a padding of 5 vw, but I want the distance to the header button ("Book Online") to be the same on all mobile devices so it looks like all of the other menu items. When I check the developer tool, the menu / space between nav items and nav button are different.

How can I fix this?  Any help is appreciated. 

URL: http://www.mauicustomcharters.com

 

Screen Shot 2022-01-10 at 4.16.48 PM.png

Adjust with this CSS

.header-menu-cta {
    position: relative;
    top: -5px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
11 hours ago, KubebaStore said:
Hi! How can I make only the font size smaller in my site's menu?
I appreciate any help!

IMG_8678.PNG

What is your site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/11/2022 at 7:34 PM, KubebaStore said:

Add to Design > Custom CSS (If it doesn't work, please open site in another browser & check again)

nav.header-menu-nav-list * {
    font-size: 12px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...

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.