Brooklyn Theme - Change the size of hamburger menu and icons

[Nas33]

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!

[Bo · Accepted solution]

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

[Nas33]

Hey Bo.

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

Nas

[King85]

Hello, 

I have the Minimal theme and would like to do the same thing. I would also like to make my shopping cart bigger.

Can you please post the code to increase the size of both of these?

If I wanted to replace the hamburger symbol with a image later on, how can I?

Thank you!

[Tomeiwines]

YEs works great! thanks for the input.  How would you leave an unchanged version on mobile?  

[Bo]

Hey there, @Tomeiwines 

Adding this to the bottom of the same file should do the trick:

@media only screen and(max-width:768px){
 .burger-icon {
  width: 18px;
height: 2px;
}
  
  .burger-icon--top {
  top: 17px;
  }
  
  .burger-icon--mid {
    top: 24px;
}
.burger-icon--bottom {
    top: 31px;
}
  

}
 

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