Change height/padding of sub-navigation in the mobile navigation

Site URL: https://cals.art

Good day everyone!

I would like to change the height or vertical padding, of the sub-navigation in my mobile navigation menu, is that possible?

Thanks in advance

Add to Design > Custom CSS

div:not([data-folder]) div.header-menu-nav-item {
    margin-bottom: 30px;
}
[data-folder] div.container {
    margin-bottom: 50px !important;
}

On 8/13/2022 at 11:22 PM, tuanphan said:

Add to Design > Custom CSS

div:not([data-folder]) div.header-menu-nav-item {
    margin-bottom: 30px;
}
[data-folder] div.container {
    margin-bottom: 50px !important;
}

 

Thanks so much for your response tuanphan, unfortunately this code is changing the spacing between menu elements, but I need to raise the entire sub-menu (folder link) up, I've attached images to better illustrate 🙂

Thanks for the help I really appreciate it

My apologies, the site is https://cals.art  and the password is pump

Thanks again!

On 8/22/2022 at 7:56 PM, calcal said:

My apologies, the site is https://cals.art  and the password is pump

Thanks again!

Add to Design > Custom CSS

[data-folder] .header-menu-nav-folder-content {
    justify-content: flex-start;
}

Thanks again @tuanphan this has solved the issue perfectly!

On 8/24/2022 at 8:52 AM, tuanphan said:

Add to Design > Custom CSS

[data-folder] .header-menu-nav-folder-content {
    justify-content: flex-start;
}

 

Hi tuanphan,

I have learned a lot from your posts over the years!

Was wondering if this could be coded to justify (vertically) the menu items in the mobile menu?

something like this - 

/* TRYING TO GET THIS TO SPACE EVENLY on MOBILE MENU */

[data-folder] .header-menu-nav-folder-content {
    justify-content: space-evenly !important;
}

not  spacing evenly - just getting the default.

For reference, my site is

spstudios.com

(issue is when viewing in mobile or browser-window is smaller than 1400px wide)

Thanks, 'spstudiosdotcom'

On 10/10/2023 at 11:59 PM, spstudiosdotcom said:

Hi tuanphan,

I have learned a lot from your posts over the years!

Was wondering if this could be coded to justify (vertically) the menu items in the mobile menu?

something like this - 

/* TRYING TO GET THIS TO SPACE EVENLY on MOBILE MENU */

[data-folder] .header-menu-nav-folder-content {
    justify-content: space-evenly !important;
}

 

not  spacing evenly - just getting the default.

For reference, my site is

spstudios.com

(issue is when viewing in mobile or browser-window is smaller than 1400px wide)

Thanks, 'spstudiosdotcom'

Do you have an example or image of what your desired layout? I can imagine and help easier

Hello,

I'm looking to do a similar thing with the mobile version of my site. For some reason the spacing on the secondary navigation is extremely close and I would like is spaced out.

Website: worldwidetravelhouse.com

8 hours ago, beelyshe said:

Hello,

I'm looking to do a similar thing with the mobile version of my site. For some reason the spacing on the secondary navigation is extremely close and I would like is spaced out.

Website: worldwidetravelhouse.com

You can use this code to Website > Website Tools > Custom CSS

nav.Mobile-overlay-nav--secondary a.Mobile-overlay-nav-item {
    margin-bottom: 20px !important;
}

9 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

nav.Mobile-overlay-nav--secondary a.Mobile-overlay-nav-item {
    margin-bottom: 20px !important;
}

 

Thank you so much!!!!!!

Hello,

I have similar issues with the language switcher being left too far from the main navigation menu. How can it bring it higher up?

On 3/30/2024 at 2:29 AM, Shamir said:

Hello,

I have similar issues with the language switcher being left too far from the main navigation menu. How can it bring it higher up?

 

Can you share site url?

On 4/1/2024 at 9:41 AM, tuanphan said:

Can you share site url?

Hello, yes www.hotyogacph.dk

6 hours ago, Shamir said:

Hello, yes www.hotyogacph.dk

You try use this code to Website > Website Tools > Custom CSS

.header-menu-actions.language-picker.language-picker-mobile {
    position: relative;
    top: -100px;
}

On 4/8/2024 at 9:29 AM, tuanphan said:

You try use this code to Website > Website Tools > Custom CSS

.header-menu-actions.language-picker.language-picker-mobile {
    position: relative;
    top: -100px;
}

 

Fantastic. Thank you so much. It worked.