Fisierele de care avem nevoie:
header.php (sau fisierul in care avem meniul)
style.css (sau fisierul ce contine stilul elementelor din header.php)

Pentru a crea un meniu responsive urmam pasii de mai jos:

1. Cream meniul pentru versiunea desktop(neresponsive) adaugand functia WordPress pentru meniu in header.php:

<?php wp_nav_menu(); ?>

care poate avea si argumente, ca aici:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

pe care o includem intr-un wrapper cu id-ul #main-menu:

<div id="main-menu"><?php wp_nav_menu(); ?></div>

2. Cream meniul responsive duplicand pasul 1 si inlocuind id-ul #main-menu cu id-ul #responsive-menu:

<div id="responsive-menu"><?php wp_nav_menu(); ?></div>

3. Adaugam butonul de toggle deasupra meniului cu id-ul #responsive-menu. Butonul va fi label-ul unui checkbox; deci adaugam un label (care nu va contine nici un text pentru ca ii vom atribui o imagine in CSS-pasul 6) si un checkbox cu id-ul #show-menu. Adaugam atributul for label-ului, care primeste ca valoare id-ul checkbox-ului, #show-menu (for="show-menu"). De asemenea, ii adaugam clasa .show-menu label-ului ca sa il putem personaliza (pasul 6).

<label for="show-menu" class="show-menu"> </label>
<input type="checkbox" id="show-menu" role="button">

4.HTML-ul ar trebui sa arate asa:

<div id="main-menu"><?php wp_nav_menu(); ?></div>
<label for="show-menu" class="show-menu"> </label>
<input type="checkbox" id="show-menu" role="button">
<div id="responsive-menu">
<?php wp_nav_menu(); ?>
</div>

Urmeaza partea de CSS pe care o introducem in fisierul style.css:


5. Adaugam stil meniurilor : meniul pentru desktop va afisa elementele orizontal, iar meniului responsive va afisa elementele vertical(puteti adauga si alte elemente de stil cum ar fi: padding, text-underline, color sau background-color ca sa obtineti stilul dorit pentru meniul vostru):

#main-menu ul li {
float: left;
text-align: center;
padding: 10px 20px;
}
#responsive-menu ul li {
float: none;
text-align: center;
}

6. Ati observat ca label din HTML nu contine nici un text, deci nu o sa apara nimic inaintea checkboxului; in loc de text vrem un buton de meniu responsive format din 3 linii orizontale; de aceea personalizam tag-ul <label> printr-o imagine menu.png (pe care o puteti crea intr-un program de grafica, cum ar fi Photoshop, sau poate o aveti deja) ca sa arate ca un buton de meniu responive. Adaugam imaginea in folderul images din tema noastra:

.show-menu {
background: url(../images/menu.png) center no-repeat;
background-size: contain;
height: 20px;
text-align: center;
padding: 10px 0;
display: none;
cursor: pointer;
text-decoration: none;
color: #fff;
}

7. Ascundem checkbox-ul si label-ul pentru versiunea desktop; label-ul il vom afisa doar pentru dimensiunile dispozitivelor mobile (pasul 9):

input[type=checkbox]{
display: none;
}
.show-menu {
display: none;
}

8. Cand checkbox-ul este bifat, vom afisa toate elementele imediat urmatoare checkbox-ului, care au id-ul #responsive-menu:

input[type=checkbox]:checked + #responsive-menu{
display: block;
}

Urmeaza partea responsive:


9. Alegem pana la ce dimensiune a ecranului sa se afiseze meniul responsive, printr-un media query; eu am ales 768px; ascundem meniul cu id-ul #main-menu, afisam label-ul cu clasa .show-menu; peste dimensiunea de 768px se va afisa meniul initial, cel cu id-ul #main-menu:

@media only screen and (max-width: 768px) {
#main-menu {
display: none;
}
.show-menu {
display:block;
}
}

10. CSS-ul ar trebui sa arate asa:

#main-menu ul li {
float: left;
text-align: center;
padding: 10px 20px;
}
#responsive-menu ul li {
float: none;
text-align: center;
}
.show-menu {
background: url(../images/menu.png) center no-repeat;
background-size: contain;
height: 20px;
text-align: center;
padding: 10px 0;
display: none;
cursor: pointer;
text-decoration: none;
color: #fff;
}
input[type=checkbox]{
display: none;
}
.show-menu {
display: none;
}
input[type=checkbox]:checked + #responsive-menu{
display: block;
}
@media only screen and (max-width: 1020px) {
#main-menu {
display: none;
}
.show-menu {
display:block;
}
}