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

7kingodmsla
Trailblazer
222 0 39

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

 

here is reference 

i will like to reduce padding in red areasi will like to reduce padding in red areas

 

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

Replies 17 (17)

DipenPanchal
Shopify Partner
252 59 80

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.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
7kingodmsla
Trailblazer
222 0 39
DipenPanchal
Shopify Partner
252 59 80

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 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
7kingodmsla
Trailblazer
222 0 39

@DipenPanchal hello this is how i would like my mobile menu  exampleexample

 

this is my current store 

 

my storemy store

7kingodmsla
Trailblazer
222 0 39

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

7kingodmsla
Trailblazer
222 0 39
DipenPanchal
Shopify Partner
252 59 80

Hello @7kingodmsla 

May I know font family?

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
7kingodmsla
Trailblazer
222 0 39

font family is " BASIC COMMERCIAL BOLD " 

7kingodmsla
Trailblazer
222 0 39
DipenPanchal
Shopify Partner
252 59 80

Hello @7kingodmsla 

DipenPanchal_0-1650264741021.png

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
7kingodmsla
Trailblazer
222 0 39

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

7kingodmsla
Trailblazer
222 0 39

will you be able to code ?  @DipenPanchal 

7kingodmsla
Trailblazer
222 0 39

@KetanKumar please review this request ?

DipenPanchal
Shopify Partner
252 59 80

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, 

DipenPanchal_0-1650270990987.png

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
7kingodmsla
Trailblazer
222 0 39

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

i want to remove all spacei want to remove all space

7kingodmsla
Trailblazer
222 0 39

also how to make black background not gray @DipenPanchal 

AvadaCommerce
Shopify Partner
3879 839 952

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.

banned