Archived topic

off canvas issue

5 replies · Started by t29k75 on February 16, 2023

Viewing posts 1–6 of 6

February 16, 2023 at 9:26 am #2535825

Hi,

I would like to ask you to help me with styling in Off canvas menu.

1. spacing between menu items on tablet & mobile. I want it to be 3em on tablet, but on mobile 1,6em. In Customizer-Layout-Off Canvas Panel-Menu Item Height there is no option for tablet and/or mobile. So, I tried to add in Customizer-Typography-Off Canvas Panel-Line Height 3em for tablet and 1,6em for mobile. It shows correct gaps between items in customizer, but on real tablet & mobile, does not. It is only one or the other. How to achieve it?

2. I added background image to off canvas menu positioned on right side, visible 50% left half of logo . On tablet & mobile I can do unwanted scroll left-right (full width of image). What should be added to CSS, so it will not be possible to do horizontal scroll?

CSS used:

#generate-slideout-menu.do-overlay .main-nav .slideout-menu li {
text-align: left;
}
#generate-slideout-menu:before {
position: absolute;
width: 100%;
height: 100%;
content:'';
background-image: url('URL');
background-position: 0% 90%;
background-size: contain;
background-repeat: no-repeat;
opacity: .1;
}

thanks,
Tibor

GP 3.2.4
GPP 2.2.2
GB 1.6.0
GBP 1.4.0

February 16, 2023 at 11:03 am #2535927

Hi there,

1. I checked the off canvas menu, the line height is showing correctly, if this is not what you see on the front end, make sure you've cleared your browser cache.
https://www.screencast.com/t/xp928ISCzbf9

2. Change your CSS to this:

#generate-slideout-menu:before {
    position: fixed;
    width: 50%;
    height: 100%;
    content: '';
    background-image: url('URL');
    background-position: 0 90%;
    background-size: 390px;
    background-repeat: no-repeat;
    opacity: .1;
}

February 17, 2023 at 6:49 am #2536775

Hi Ying,

CSS worked perfectly!

One more question: how to vertically center whole menu, so there is always equal gap above 1st and bellow last menu item on mobile & tablet?

thanks,

Tibor

February 17, 2023 at 6:54 am #2536783

Hi there,

try adding this CSS:

.slideout-navigation.do-overlay .inside-navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

February 17, 2023 at 7:30 am #2536809

David,

perfect!
thank you guys,

Tibor

February 17, 2023 at 7:43 am #2536815

You're welcome

This archived topic is closed to new replies.

Start building better websites today.