Fixed Hamburger Menu in Oxygen

This article provides the steps to set up a fixed Burger Trigger near the top left corner of the browser and appearing on top of the Off Canvas component having a Slide Menu.

We shall make the hamburger menu static from 768px to 1300px since it will be overlapping the logo during these widths when using the Atomic design set of Oxygen. These widths can be changed depending on your site’s header layout.

Here is the sample structure after you have implemented the steps below.

Step 1

Edit your Main catch all template with Oxygen and add a Burger Trigger component. In this example, let’s add it to the left of text link in Header Builder’s Header Row (bottom one).

Set the Burger Line Height to 3 to make the hamburger’s lines thinner.

Go to Button Styles and set a padding of 10px each on top, left and bottom and 15px on the right.

Background Color: #ffffff

Border Radius: 30px

Go to Button Text and add MENU text. If you would like to change the font size of this text, you can do so at Typography.

Go to Advanced > Layout.

Set Position to fixed with 20px top and left each.

Set Z-index of 1001.

Step 2

Add an Off Canvas component below all the other components.

Under Layout / Spacing you might want to add a value like 100px so that there will be space for the X icon.

Add a Slide Menu inside the Off Canvas and select your desired menu to be shown.

In our example site, we added 10px padding at the top and bottom under Menu Items / Spacing.

Then under Sub Menus / Spacing, added 20px left padding.

Step 3

Let us add some custom CSS at Manage > Stylesheets.

.admin-bar #-burger-trigger-59-29 {
	top: 52px; /* 20 + 32 */
}

@media only screen and (max-width: 782px) {
	.admin-bar #-burger-trigger-59-29 {
		top: 66px; /* 20 + 46 */
	}
}

.hamburger-box {
	transform: scale(0.5);
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#-burger-trigger-59-29 {
		position: static;
	}
}

Replace all instances of -burger-trigger-59-29 in the above with the ID of your Burger Trigger.

.admin-bar #-burger-trigger-59-29 {
	top: 52px; /* 20 + 32 */
}

@media only screen and (max-width: 782px) {
	.admin-bar #-burger-trigger-59-29 {
		top: 66px; /* 20 + 46 */
	}
}

will ensure that the fixed hamburger menu will be 20px from the top even when admin bar is visible. 32px is the height of the admin bar above 783px. 782px and below it is 46px tall.

.hamburger-box {
	transform: scale(0.5);
}

will reduce the size of the hamburger menu lines.

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#-burger-trigger-59-29 {
		position: static;
	}
}

will make the hamburger menu static during the viewport widths when it will be overlapping the logo. You may need to change these widths or make any other adjustments as needed.