Brooklyn Theme - Change the size of hamburger menu and icons

Solved
New Member
2 0 1

Hey,

 

I'm currently using the brooklyn theme and I want to change the size of the hamburger menu on the left as well as the icons on the right; I would like to increase their size and make them more prominent. Could you please guide me through the coding process? 


I've attached an image below for some context. Thank you for your help in advance!

Help.PNG

0 Likes
Highlighted

Success.

Shopify Staff
Shopify Staff
713 68 140

Hey there, @Nas33 

 

Bo here from Shopify Support! 

 

I just moved your query over here to the Design board as this is where a lot of people would come for all sorts of design queries. This is something that can definitely be achieved with some coding. This tutorial is specific to an unedited version of the Brooklyn theme, VERSION 12.0.1. We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

 

NB: When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

 

  • Go to Online Store > Actions > Edit Code. 
  • In the Assets folder open up the theme.scss.liquid and scroll to the bottom of the file.
  • The default values for the hamburger menu are a width of 20, and a height of 2. You can change the width to 40 and it would give you this:

  • To achieve this, paste the following code to the bottom of the file and click save:
.burger-icon {
width: 40px;
height: 2px;
}

 

  • If you want to change the height, that’s where it gets more difficult because you need to change the spacing in between the lines at the same time, otherwise, you’ll end-up with this:

  • You will need to manually adjust the position of “burger-icon--top”, “burger-icon--mid”, “burger-icon--bottom”. To do so you will add the following code to the bottom of the theme.scss.liquid:
.burger-icon--top {
top: 11px;
}
.burger-icon--mid {
    top: 24px;
}
.burger-icon--bottom {
    top: 37px;
}

 

  • Which will result in the following:

  • Make sure to use a media query so that you can tweak the value independently on mobile and desktop as the end result will not be the same based on the screen size.
  • To change the size of the other icons on the header you will add the following code: 
.site-nav__link--icon {
    font-size: 1.2em;
}

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
2 0 1

Hey Bo.

 

Thank you for your help! This worked perfectly. :)

 

Nas

1 Like