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.

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

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:

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!).

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:

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

We’re done here!

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.

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:

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:

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.

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

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

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:

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

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:

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):

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:

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

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)!

Alright!

We have both of our elements side by side!

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

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

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:

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:

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.