css – Twenty Twenty change menu dots to bars without plugin


I am trying to changes the dots from the mobile navigation in the Twenty Twenty theme into three bars. I like that hamburger menu better then the three dots. I have found the plugin Twentig, this plugin makes this change but I do not need any other function of this plugin so I would rather just use a couple of lines of code.

I can think of how to do this with jQuery, but I wonder if there is a better way with css for instance.

<span class="toggle-inner">
<span class="toggle-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="26" height="7" viewBox="0 0 26 7">
<path fill-rule="evenodd" d="M332.5,45 C330.567003,45 329,43.4329966 329,41.5 C329,39.5670034 330.567003,38 332.5,38 C334.432997,38 336,39.5670034 336,41.5 C336,43.4329966 334.432997,45 332.5,45 Z M342,45 C340.067003,45 338.5,43.4329966 338.5,41.5 C338.5,39.5670034 340.067003,38 342,38 C343.932997,38 345.5,39.5670034 345.5,41.5 C345.5,43.4329966 343.932997,45 342,45 Z M351.5,45 C349.567003,45 348,43.4329966 348,41.5 C348,39.5670034 349.567003,38 351.5,38 C353.432997,38 355,39.5670034 355,41.5 C355,43.4329966 353.432997,45 351.5,45 Z" transform="translate(-329 -38)">
<span class="toggle-text">Menu</span>

Leadhood 3 weeks 2021-05-20T10:31:11-05:00 0 Answers 0 views 0

Leave an answer