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

Store Design
1

hello i would like to minimize the padding between the mobile navigation menu

here is reference

i will like to reduce padding in red areas
i will like to reduce padding in red areas1107×1426 40.6 KB

i would also like to add social media icons to menu aswell ?

2

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.

3

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

password godgod24

1 Like
4

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

5

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.

6

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

example
example2084×2084 52.5 KB

this is my current store

my store
my store1290×1537 309 KB

1 Like
7

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

8

@AvadaCommerce

9

Hello @7kingodmsla

May I know font family?

10

font family is " BASIC COMMERCIAL BOLD "

1 Like
11

@SetuBridge_1

12

Hello @7kingodmsla

DipenPanchal_0-1650264741021.png
DipenPanchal_0-1650264741021.png928×578 40.9 KB

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

1 Like
13

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

1 Like
14

will you be able to code ? @SetuBridge_1

15

@KetanKumar please review this request ?

16

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,

DipenPanchal_0-1650270990987.png
DipenPanchal_0-1650270990987.png419×616 14.1 KB

17

how to remove all padding / space in menu ? ( i have highlighted in red places where i want no padding @SetuBridge_1

i want to remove all space
i want to remove all space802×1238 77.4 KB

18

also how to make black background not gray @SetuBridge_1