Increase Left Navigation Menu Width for Brooklyn Theme

Solved
Tourist
14 0 0

Some of my menu display text are running into 2 lines. Since the menu appears when the user clicks, I would like for it to be slightly wider so each item displays on 1 line. I've tried changing the code on header.liquid but it just simply adjusts the width for the content, but the navigation menu width doesn't change. Please kindly advise what I should be doing. Thank you so much!

0 Likes
Shopify Expert
665 170 199

Hi, @camylow ,

This is Evita from On The Map.

 

Can you maybe provide a screenshot and add your store URL? You will need to add a little bit css.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Hello ,

Please share your site url so that I will check and give you exact solution

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
14 0 0

Thank you for the responses. The theme is still in preview mode - https://6tdgpf2s2iw3qtbv-6732091.shopifypreview.com

 

As you can see in the screenshot below, when the menu opens, the subitems are running into 2 lines. I've tried editing the theme.scss.liquid but I think I'm not getting the right lines or changing the right numbers. Thank you so much for all your help.

 

Screenshot 2019-11-21 at 1.03.59 PM.png

0 Likes

Success.

Shopify Partner
45 13 9

Hi, You have to add this css code to solve this issue.

 

@media screen and (min-width: 769px){
.drawer__inner {
    padding-left: 15px !important;
    
}
}
.mobile-nav__sublist .mobile-nav__link {
    padding-left: 15px !important;
    padding-right: 0 !important;
}
If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
1 Like
Tourist
14 0 0

Thanks mijan! It works! I just realised now that it's hard to differentiate the child items in the menu.

Is there any way I can increase the indentation or have a slightly different text format, for example to italicise the sub menu items?

 

Screenshot 2019-11-21 at 2.25.46 PM.png

0 Likes

Success.

Shopify Partner
45 13 9

Hi, Here is css to make sub items italic .

 

.mobile-nav__sublist .mobile-nav__link {
    padding-left: 15px !important;
    padding-right: 0 !important;
    font-style: italic;
}
If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
1 Like
Tourist
14 0 0

Thank you again mijan! I have one last query that I need help with.

 

Is there any way I can set a different banner for computer and mobile device? The current banner works perfectly on computer, but on mobile device, due to the portrait requirement, I have to use a different banner. I have the image, but how do I tell the theme to pick up a different image for mobile please? This is what it looks like on mobile -

Screenshot 2019-11-24 at 5.58.20 PM.png

 

We would really like for the banner to include the box. This is what the computer version looks like -

Screenshot 2019-11-24 at 5.58.47 PM.png

0 Likes
Tourist
14 0 0

@mijankarim , I've been successful in adding the related products below the product page. But I can't seem to get the random pick to work. Do you think you could help to take a look and give me some advice please?

 

And is it possible to have the theme pick up a different banner for computer and mobile browser? The dimensions are different for a landscape and portrait image. Really appreciate your help. Thank you.

0 Likes
Shopify Partner
45 13 9

Hi  @camylow ,

 

You can check this blog to know how you can control related products .

https://www.shopify.com/partners/blog/related-products 

 

Brooklyn theme does not have a simple solution to upload different banner image for desktop and mobile .  you can consult with a developer .

 

Thanks

If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
0 Likes