Why is my hamburger menu not shown? [closed]

Question

I use Genesis Digital Pro theme and my responsive menu is not shown on mobile devices. There is block in page that contains my menu, and it opens when you click this area, but I want the hamburger to be shown from the start (as it supposed to work). What to do?

Answer 1

The hamburger is shown with ionicons as an after element. You have conflicting CSS in your theme.

This (specifically, the content: " ";) CSS:

.entry:before, .entry-content:before, .nav-primary:before, .site-container:before, .site-header:before, .site-inner:before, .wrap:before {
    content: " ";
    display: table;
}

is overwriting the hamburger menu's CSS

@media only screen and (max-width: 800px){
  .menu-toggle:before, .menu-toggle.activated:before {
    color: #1e1e1e;
    content: "\f130";
    display: inline-block;
    font: normal 20px/1 'ionicons';
    margin: 0 auto;
    padding-right: 10px;
    text-rendering: auto;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    vertical-align: middle;
  }
}

Here's a devtools screenshot: https://i.stack.imgur.com/yjoXV.png