Opens in a new tab
22nd Nov '22
/
0 comments

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu?

The default width value of 20px can be changed by selecting the Nav Menu element → MOBILE MENU → HAMBURGER TOGGLE → Toggle width.

CSS has to be added to change the height as of Bricks 1.5.7.

STYLE → CSS → Custom CSS:

root:not(.show-mobile-menu) .bricks-mobile-menu-toggle {
	height: 18px;
}

root:not(.show-mobile-menu) .bricks-mobile-menu-toggle .bar-center {
	top: 8px;
}

root:not(.show-mobile-menu) .bricks-mobile-menu-toggle .bar-bottom {
	top: 16px;
}
Get access to all 633 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
Pro
Oxygen’s Focus Section in Bricks

Oxygen’s Focus Section in Bricks

These are the steps to implement Focus Section, an Oxygen’s composite element, in Bricks.
Categories:
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Categories:
How to Change the Hamburger Trigger Breakpoint in Bricks

How to Change the Hamburger Trigger Breakpoint in Bricks

Update: This option is built-into Bricks and following custom CSS is not needed. For the Nav Menu element, use the "Show Mobile Menu Toggle" dropdown.…
Categories:
Pro
Mmenu Light in Bricks

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Categories:
Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Categories:
Pro
Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width…
How to add SVG icon as list item bullets

How to add SVG icon as list item bullets

Add this sample CSS: Replace brxe-list with the class of your ul element. Here's how you can generate the value of background-image property: Copy your…
Categories:
Tags: