Change navigation bar to toggle-active icon

Hi,

to create a more customizable mobile menu with a toggle icon, I recommend you to install the Responsive Menu plugin. Then you can hide the default drop-down menu using this custom CSS:

@media screen and (max-width: 1012px) {
#wrapper .menu-box-container {display: none;}
}

I recommend you to set the Menu Breakpoint in the plugin’s settings panel to 1012px.

Best regards,
Tomas Toman

Wow.. many thanks for quick and accurate answer!

You are welcome!

Well, unfortunately I have some problems with placing the toggle button since it has a fixed distance from the top. Such setup applies to the websites that have menu navbars high on top, while in my website the menu is below the logo and site description. Therefore for my website I would like to change the distance of a toggle button dynamically and stick it to the Menu div.

I disabled only #wrapper .menu {display: none;} to display only my Home tab from the left. Then I wanted to change button’s css file and set its position: relative property but frankly I can’t find this file… (don’t know how I search for specific file using firebug in Filezilla).

Would you have some suggestions how can I do that?

Instead of the default behavior, you can use a [responsive-menu] shortcode to show the toggle icon within the menu panel. Just tick the shortcode option in the “Responsive Menu” settings panel. Then put the shortcode just under the following element in “header.php”:

<div class="menu-box">

You will need to use the function “do_shortcode” to output the shortcode:

<?php echo do_shortcode( '[responsive-menu]' ); ?>

The custom CSS that I posted above will hide the whole menu panel. In this case, you probably will need to hide only the default drop-down menu:

#wrapper .selectnav {display: none;}

If you will need some help with styling the toggle icon, please post here a link to your website, I will check it.

Best regards,
Tomas Toman

Can’t thank you enough Tomas for your help. Now my toggle-icon behaves exactly how I wanted it to. Given the fact that my problem was not specifically related to your theme, it is awesome how you supported me! ??

THANKS AGAIN – you saved me many hours of searching our lovely web ??

As for the icon styling, I found the file with the CSS code and customized it for my preferences. Unfortunately I can’t show you my website yet, because it is still during the “editing mode” on localhost.

Best wishes,
sprajt

I am glad that I could help you!

With the best wishes,
Tomas Toman