Hamburger menu – Change the dashes to icons

depends on what kind of hamburger menu you have choosen – for example a classic one:

.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
  content: " ";
  opacity: 0.5;  /*** default is 0.3  ***/
  height: 0
}

.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet:before {
  content: "\2907";
  width: 20px;
  height: 20px;
  position: absolute;
  top: -12px;
  left: 0;
  font-size: 20px
}

looks this way ( click to enlarge ) :

if you like to differ between the menu levels – we had to be more precise in the selector.

f.e.:

.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
  content: " ";
  opacity: 0.5;  /*** default is 0.3  ***/
  height: 0
}

.html_av-overlay-side-classic #top .av-burger-overlay .sub-menu .avia-menu-text {
  padding-left: 5px ;    /*** a little more distance to that sign  ***/
}

.html_av-overlay-side-classic #top .av-burger-overlay .sub-menu .avia-bullet:before {
  content: "\2907";
  width: 20px;
  height: 20px;
  position: absolute;
  top: -12px;
  left: 0;
  font-size: 20px;
  color: red;
}

.html_av-overlay-side-classic #top .av-burger-overlay .sub-menu .sub-menu .avia-bullet:before {
  content: "\21A6";
  font-size: 20px;
  color: green
}

Btw: sometimes the “avia-bullet” is set to display: none – you then had to get rid of that setting first
You can find here the codes for the content insertion :
use the hex-code and replace the leading &#x with a backslash \
html-entities

• This reply was modified 1 year, 8 months ago by Guenni007.