Hamburger menu for wordpress template

I can not find where can I develop a Hamburger menu for this website:

When you change it to small size, navbar display non and you will not any responsive. This is a wordpress template. Where can I fix this problem? Which file? Header.php? index.php? functions.php?
And how should I code it in PHP?


You don’t need PHP to fix this.

Currently your CSS shows this:

@media (min-width:992px) {
  .primary-header .nav-menu.primary {
    display: table-cell;

default behavior is this

.primary-header .nav-menu.primary {
    display: none;
    vertical-align: middle;

You obviously want to keep this, but now you’ll have to show a hamburger when nav-menu.primary displays none.

Just add another div with a hamburger icon that’s visible when nav-menu.primary is hidden, and hidden when nav-menu.primary is visible.

This is the CSS you’ll want to modify:

Hope this makes sense?

1 Like