Brooklyn theme: hamburger menu on desktop

Are you fond of how your Brooklyn theme's menu looks on mobile and you wish it would look the same on desktop? Today is your lucky day. Brooklyn's compact style can be quite pleasing, so limiting this feature only for mobile devices would be a shame.

In this tutorial I'll teach you how to enable it just by copy & pasting a single piece of CSS code.

Adding the code to your theme

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Find Asset > theme.scss.liquid or theme.css or timber.scss or timber.css (the name varies depending on your theme)
3. Paste this code at the bottom of the file:
   

@media (min-width: 768px){
  shopify-section-header > div > div.header-container.drawer__header-container > div > header > div > div > nav {
  display: none;
  }
 .grid--full.grid--table {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 100%;
  }
 .site-nav--mobile.text-right {
      float: right;
  }
 /* Desktop nav items */
 .site-header .grid__item:nth-child(3){
     display: none;
 }
 /* Logo */
 .site-header .grid__item:nth-child(2){
  max-width: 80%;
  width: 100%;
  display: flex;
  align-items: center;
 }
 /* Menu */
 .site-header .grid__item:nth-child(1) .site-nav--mobile,
  .site-header .grid__item:nth-child(1) {
      display: table-cell !important;
      vertical-align: middle !important;
      max-width: 165px;
      width: 100%;
  }
 .site-header__logo{
      text-align: center;
  }
 /* Cart */
 .site-header .grid__item:nth-child(4) {
      display: table-cell !important;
      vertical-align: middle !important;
      max-width: 165px;
      width: 100%;
      margin: 0 0 0 auto;
  }
  }

And that's it, you are all set!

You may also be interested in learning how to enable a swipe slider on product page images.