Adjusting Mobile Menu and Submenu Alignment and Spacing on 7.1

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

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;
}
}

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?

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!!!!  

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

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

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

 

Adjust with this CSS

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

Hi! How can I make only the font size smaller in my site's menu?
I appreciate any help!

11 hours ago, KubebaStore said:

Hi! How can I make only the font size smaller in my site's menu?
I appreciate any help!

What is your site url? We can check easier

On 4/4/2022 at 8:06 AM, tuanphan said:

What is your site url? We can check easier

https://www.kubebastore.com/

Thank you!

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

https://www.kubebastore.com/

Thank you!

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;
}

11 hours ago, tuanphan 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;
}

 

This worked, thank you very much!

Hello,

https://lifecycles-lca.squarespace.com/

PW: lifecycles123

I'm struggling to align the + icon at the right of the nav - can anyone help with that? 

Many thanks! 

On 2/4/2023 at 7:54 AM, Lauren_C said:

Hello,

https://lifecycles-lca.squarespace.com/

PW: lifecycles123

I'm struggling to align the + icon at the right of the nav - can anyone help with that? 

Many thanks! 

• 
   

 

 

Add to Design > Custom CSS

.header-menu-nav-folder-content a[data-folder-id] .header-menu-nav-item-content:after {
    float: right;
}
.header-menu-nav-item-content {
    display: block;
}

Hello @tuanphan ! This site www.lalahmanlycounseling.com - I cannot find any CSS code to get rid of the gaps between items on the mobile menu. Would you be able to help? Thank you!!

-Rebecca

On 2/14/2024 at 8:06 AM, RebeccaHoltdotco said:

Hello @tuanphan ! This site www.lalahmanlycounseling.com - I cannot find any CSS code to get rid of the gaps between items on the mobile menu. Would you be able to help? Thank you!!

-Rebecca

You can use this CSS code

[data-folder="/about"] .header-menu-nav-folder-content {
    justify-content: center !important;
}

10 hours ago, tuanphan said:

You can use this CSS code

[data-folder="/about"] .header-menu-nav-folder-content {
    justify-content: center !important;
}

 

thank you!! It worked!