🔲 Border

Add the following code to the bottom of the Custom Styles to change the hamburger menu icon's colour

⏩ Code

.menu {
	border: 5px solid red;
}

⏩ Explanation of Code

• .menu { > tells the css to target the .menu class which is assigned to the hamburger button. You can adjust this to suit
• border : > define your border by adding individual border properties described below

⏩ Border Properties 

• The border property is a shorthand property for the below individual border properties:
  • border-width > the width (thickness) of the border
    • can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
  • border-style (required) > defines what style of border to apply (see below)
    • The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border)
  • border-color > defines the colour of the border
    • The color can be set by:
      • name - specify a color name, like "red"
      • HEX - specify a HEX value, like "#ff0000"
      • RGB - specify a RGB value, like "rgb(255,0,0)"
      • HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
      • transparent
    • Note: If border-color is not set, it inherits the colour of the element.

⏩ Border styles

🔙 Back to 🍔 Hamburger Customisation