Shopify themes, liquid, logos, and UX
hello i would like to minimize the padding between the mobile navigation menu
here is reference
i would also like to add social media icons to menu aswell ?
Hi @7kingodmsla
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
Hello @7kingodmsla
Greetings!!
For reduce padding between the mobile navigation menu
Please follow the steps:
1. Online store->themes->Actions->Edit code->assets->theme.scss.liquid
2. Paste the below code at the last
#NavDrawer .mobile-nav__item a,#NavDrawer .mobile-nav__toggle button{ padding: 3px 15px; }
And for add the social media icon you need to give store access and customize the header, you can hire expert
Please send code to change mobile menu to black and padding configuration thank you . @DipenPanchal
Hello @7kingodmsla
May I know font family?
font family is " BASIC COMMERCIAL BOLD "
Hello @7kingodmsla
Do you want to add this font family or " BASIC COMMERCIAL BOLD " to this one?
Hello @7kingodmsla
Please follow the steps:
1. Online store->themes->Actions->Edit code->assets->theme.scss.liquid
2. Paste the below code at the last
/* include font */
@font-face {
font-family: "Basic-Commercial-LT-Com-Bold";
src: url("/assets/Basic-Commercial-LT-Com-Bold_1.woff") format("woff2"),
url("/assets/Basic-Commercial-LT-Com-Bold_1.woff") format("woff"); /* add here assets url*/
}
#NavDrawer .mobile-nav__item a,#NavDrawer .mobile-nav__toggle button{
padding: 3px 15px;font-size: 35px;}
#shopify-section-header #NavDrawer.drawer{width: 100%; max-width:100%;}
#NavDrawer .drawer__inner{ padding: 50px 65px 0;}
#NavDrawer .mobile-nav__item--secondary a{padding-top:0;}
#NavDrawer .mobile-nav__spacer{padding: 15px; }
3. I have attached a zip file for font download and unzip that file and upload in the assets folder https://prnt.sc/wFi1YdOwj8vp
Out put : Without uploading font family,
how to remove all padding / space in menu ? ( i have highlighted in red places where i want no padding @DipenPanchal
Hi @7kingodmsla ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 767px) {
li.mobile-nav__item:not(.mobile-nav__item--secondary) {
margin-bottom: -20px;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024