Increasing hamburger icon size

[Geek Dom]

I want to increase the size of the hamburger icon in Monochrome Pro. I've used the code below using '!important' to achieve this, but not sure if this is the right way?

.menu-toggle::before {
	font-size: 30px!important;
	font-size: 3rem!important;
	font-weight: 600!important;
}

[Victor Font]

It depends on the rest of the code. The 'C' in CSS means 'cascading'. Cascading is the priority scheme that determines which style rule applies if more than one rule matches a particular element.

Let's say that there are multiple rules in your style sheet for the .menu-toggle::before element. These rules are entered in the style sheet at lines 100, 500, and 1000 respectively. As the browser executes the style sheet, it applies the CSS in the order in which the code is listed in the style sheet.

In other words, it applies line 100 first, then line 500, then line 1000 last. If there is code in line 500 that overrides line 100, then line 500 has the priority. If there is code in line 1000 that overrides lines 100 and/or 500, then line 1000 has the priority.

When you add the !important keyword to a CSS rule, you're giving that line the priority no matter where in the style sheet it appears. The !important rule is a way to have the rules you feel are most crucial always be applied.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Geek Dom]

Thanks for the detailed explanation Victor.

[Author]

Posts