How to minimize padding between navigation ( mobile menu ) brooklyn theme

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.

@SetuBridge_1 https://7kingdomsbar.myshopify.com/

password godgod24

1 Like

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

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.

@SetuBridge_1 hello this is how i would like my mobile menu

this is my current store

1 Like

Please send code to change mobile menu to black and padding configuration thank you . @SetuBridge_1

@AvadaCommerce

Hello @7kingodmsla

May I know font family?

font family is " BASIC COMMERCIAL BOLD "

1 Like

@SetuBridge_1

Hello @7kingodmsla

Do you want to add this font family or " BASIC COMMERCIAL BOLD " to this one?

1 Like

@SetuBridge_1 BASIC COMMERCIAL BOLD , NOT THE FONT IN THE IMAGE

1 Like

will you be able to code ? @SetuBridge_1

@KetanKumar please review this request ?

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; } 
  1. 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 @SetuBridge_1

also how to make black background not gray @SetuBridge_1