Archived topic

CSS - reduce specific margin/padding in mobile off-canvas menu

3 replies · Started by Arved on April 22, 2021

Viewing posts 1–4 of 4

April 22, 2021 at 3:44 am #1744322

Hello,

I am trying to reduce white space in several places in the mobile slideout/off-canvas menu only:

1. margin/padding on the left side (means the menu items are positioned too far on the right presently)
2. reduce space between the two menu items "My Account" and the language switcher
3. reduce space between the language switcher menu items (bringing the available languages closer together)

In the main desktop menu it works fine. But I counldn't figure out how to target those with CSS in the mobile slideout menu.

Website: https://arvedgintenreiter.com

Thanks and best regards,
Arved

April 22, 2021 at 9:12 am #1744951

Hi Arved,

For 1.

Try this css, feel free to adjust the numbers :)

@media (max-width: 768px) {
.main-navigation.slideout-navigation .main-nav > ul > li > a {
    padding-left: 20px;
}
#generate-slideout-menu .slideout-menu li.offcanvas-nav-my-account {
    padding-bottom: 0;
    margin-bottom: -5px;
}
#generate-slideout-menu .slideout-menu li.weglot-lang {
    margin-top: -10px;
}
}

April 22, 2021 at 9:36 am #1744992

Hi Ying,

Thank you so much, works perfectly. Wouldn't have figured that out :)

Best,
Arved

April 22, 2021 at 11:07 am #1745104

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.