How to customize and always show the hamburger menu in Brine

Want to know how to always show (or force) your hamburger menu in Squarespace on desktop?

Let’s do it!

Want to know how to change that default hamburger icon to anything you want?

Let’s do that too!

In today’s tutorial, we’ll be looking at how you can achieve those two things in one of the templates from the Brine family.

How to force the hamburger menu for desktop in Brine

We’re starting out with a normal navigation. It doesn’t matter if it’s primary, secondary or both.

1. Starting example.png

To have the mobile menu displaying at all times, we’ll need to head over to our Style Editor or Site Styles and look for the Mobile Breakpoint option:

2. Looking for mobile breakpoint.png

If you scroll the slider to the max, you’ll see the limit is 1280px.

Meaning the maximum viewport width where we’ll see the hamburger menu appear is 1280px (rings a bell? Yep, that’s set as a media query!).

3. Slider limit.png

However… we can input our OWN value in the numbers field.

Simply click and type in a really large number like 3000px or 5000px to make sure we cover larger screen sizes:

4. Input your own value.png

Alright! We now have our mobile menu navigation showing up on desktop!

We’re done here!

Changing the hamburger menu in Brine

Let’s move onto customizing this baby, shall we?

We’ll be looking at how you can:

  1. Completely change the default icon for something else

  2. Add text next to the existing icon

Switching the hamburger icon for something else

I’ll start out where we left off, with the mobile menu on desktop.

If we take a look through our little x-ray machine (inspect element), we can see that the menu is a button element that has a class of .Mobile-bar-menu and a couple of children.

6. Looking at mobile menu via inspect element.png

Each of those children are svg elements, and they correspond to the different icon options we have to indicate the collapsed menu.

This first one is for the current hamburger menu I’m using:

7. Notice the vector icon element.png
8. Zoom in on element.png

So, in order to change that hamburger for something else, what we can do is create another option that acts as an additional children for our menu button.

We can do that by creating a pseudo-element for our button.

Then, all we have to do is hide the current hamburger icon, so only the one we create shows up.

Let’s take this step by step.

First, we’ll create the pseudo-element for our button.

We already know it has a class of .Mobile-bar-menu, so let’s use that to target it:

.Mobile-bar-menu::before {

}

In this case, it’s irrelevant if we use ::before or ::after because it’s going to be the only thing in display anyway.

Now, let’s add the content we want to use as our new icon.

Note: I’ll simply add some text, but you can upload an image if you prefer! You’ll just have to tweak it a bit more and give it a height and width.

.Mobile-bar-menu::before {
  content: 'Menu';
}

Alright! The text is there, although it’s pretty tiny.

I’ll tweak the font a bit to make it more visible:

.Mobile-bar-menu::before {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
}
12. Tweaking font.png

Ok! Much better.

Now that we’re done tweaking our new icon/text, let’s get rid of the original one!

Remember we saw all of the default icons are svg elements?

Well, what we can do – considering we don’t want any of the other ones to show up anyway – is to simply target ALL svg elements inside our button (.Mobile-bar-menu) and hide them:

.Mobile-bar-menu svg {
  display: none !important;
}

Note: the use of !important was necessary to override the original display value. Remember to use !important ONLY when absolutely necessary.

14. Removing default hamburger menu Squarespace.png

There we go!

No more hamburger menu icon on sight, only our new icon/text!

Adding text next to the existing hamburger icon

“B, that’s all good but what if I want to ADD text to the hamburger icon, not replace it?”

Ok, ok.

I gotchu!

Let’s go back to the point where we created and styled our pseudo-element text, here:

12. Tweaking font.png

If we check our button now through Inspect Element, we’ll notice that the ::before pseudo-element is a sibling of our hamburger icon just like we intended (and of all the other svgs, of course):

13. Noticing the pseudo element is a sibling.png
15. Siblings.png

Because of this, we can simply make both elements inline-block so they sit side by side.

Let’s start with the text pseudo-element:

.Mobile-bar-menu::before {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
  display: inline-block;
}
16. Making pseudo element inline block.png

Alright, and now let’s quickly check on our hamburger icon:

17. Checking original icon.png

We can see it’s set as a block element right now, so let’s change it to inline-block.

We can use the selector Squarespace is already using there, that specifically targets the hamburger and no other icon, since we don’t want to have any additional ones showing up (they’re currently set as display: none by SS to stay hidden)!

.tweak-mobile-bar-menu-icon-hamburger .Mobile-bar-menu .Icon--hamburger {
  display: inline-block;
}
18. Making icon inline block.png

Alright!

We have both of our elements side by side!

I’ll make some additional tweaks to the font to make it look nicer:

.Mobile-bar-menu::before {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  font-family: lato;
}
19. Tweaking font further.png

To give it some separation from the hamburger icon, we can add a small margin to the right of the text:

.Mobile-bar-menu::before {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  font-family: lato;
  margin-right: 6px;
}
20. Adding spacing.png

Awesome!

But what if you want the text on the other side?

Easy peasy, just switch the pseudo-element from ::before to ::after so it sits after the icon and change the margin from right to left:

.Mobile-bar-menu::after {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  font-family: lato;
  margin-left: 6px;
}
21. Changing side.png

One last thing, if you have to align the text and the icon vertically, you can use either vertical-align or give the pseudo-element a position of relative and tweak the top offset, like so:

.Mobile-bar-menu::after {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  font-family: lato;
  margin-left: 6px;
  position: relative;
  top: -2px;
}
22. Adjusting vertical alignment.png

So, there you have it!

Now you can customize your hamburger icon in Brine and force it to display on desktop!

 

Until next time,

B.

 

Full code

/*Switching the hamburger icon for something else*/
.Mobile-bar-menu::before {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
}
.Mobile-bar-menu svg {
  display: none !important;
}


/*Adding text next to the existing hamburger icon (left side)*/
.Mobile-bar-menu::before {
  content: 'Menu';
  font-size: 20px;
  line-height: 1em;
  color: teal;
  font-weight: bold;
  display: inline-block;
  text-transform: uppercase;
  font-family: lato;
  margin-right: 6px;
}
.tweak-mobile-bar-menu-icon-hamburger .Mobile-bar-menu .Icon--hamburger {
  display: inline-block;
}