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