Hello there ,
How to fix the responsiveness of the menu items in the website so it doesn’t fall down on smaller screens .
Please help in bringing the menu list to single line by keeping the starting as it is in the demo site for all screens sizes .
Site url :: https://kdq1ytvkid442cfh-71493648693.shopifypreview.com
Any ideas would be very helpful.
THANK-YOU !!!
Hi,
You can reduce the padding between menu items that will work it out. Please add the following code into your code by following this:
1- Go to online store
2- Edit Code
3- Search on the left side for base.css file
4- Open the file and paste the following code at the bottom:
.header__menu_li + .header__menu_li {padding-left: 5rem;}
Let me know if your problem is solved by accepting this as a solution otherwise let me know to find an alternative for this
Hi ,
Thank you for replying but the above code is not working in additional to that I want the menu list to occupy the complete space of website header if I reduce the padding it wont look like that .
You can set this option only for small screens using the following code:
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.header__menu_li + .header__menu_li {padding-left: 5rem;}
}
If the code didn’t work I recommend if you can give me access to your website so I can write the correct code for you and you can follow it up
I have same question
