- This topic has 5 replies, 3 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
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,
TiborGP 3.2.4
GPP 2.2.2
GB 1.6.0
GBP 1.4.0Customer Support
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/xp928ISCzbf92. 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; }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
Customer Support
Hi there,
try adding this CSS:
.slideout-navigation.do-overlay .inside-navigation { display: flex; flex-direction: column; justify-content: center; height: 100%; }David,
perfect!
thank you guys,Tibor
You’re welcome
- You must be logged in to reply to this topic.
