Menu icon Foundation
Change responsive menu-icon on toggle reveal

Hello all,

 

I am using Foundation 6 framework and i just can't understand how the responsive menu works anymore. It just toggles the element with the same id but we don't have any active class or something for the menu icon.

 

I want to change the menu-icon to an X when the mobile menu is open and bring back the default menu-icon when the mobile menu is closed.

 

Any help with that is always welcome.

 

<nav role="navigation">
    <div class="row">
        <div class="small-12 columns">
            <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                <div class="row">
                    <div class="small-6 columns">
                        <div class="title-bar-title"><img src="../assets/img/logo.png" alt=""></div>
                    </div>
                    <div class="small-6 columns">
                        <div class="container">
                            <button class="menu-icon" type="button" data-toggle></button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="top-bar" id="responsive-menu">
        <div class="top-bar-left">
            <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                <li><a href="#" class="button">About<sup>&reg;</sup></a></li>
                <li><a href="#" class="button">RWAR<sup>&reg;</sup></a></li>
                <li><a href="#" class="button active">STUDIES</a></li>
                <li><a href="#" class="button">TOOLS & RESOURCES</a></li>
            </ul>
        </div>
    </div>
</nav>

foundation 6responsive menutop-barmenu icon changemenu-icon

Hello all,

 

I am using Foundation 6 framework and i just can't understand how the responsive menu works anymore. It just toggles the element with the same id but we don't have any active class or something for the menu icon.

 

I want to change the menu-icon to an X when the mobile menu is open and bring back the default menu-icon when the mobile menu is closed.

 

Any help with that is always welcome.

 

<nav role="navigation">
    <div class="row">
        <div class="small-12 columns">
            <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                <div class="row">
                    <div class="small-6 columns">
                        <div class="title-bar-title"><img src="../assets/img/logo.png" alt=""></div>
                    </div>
                    <div class="small-6 columns">
                        <div class="container">
                            <button class="menu-icon" type="button" data-toggle></button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="top-bar" id="responsive-menu">
        <div class="top-bar-left">
            <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
                <li><a href="#" class="button">About<sup>&reg;</sup></a></li>
                <li><a href="#" class="button">RWAR<sup>&reg;</sup></a></li>
                <li><a href="#" class="button active">STUDIES</a></li>
                <li><a href="#" class="button">TOOLS & RESOURCES</a></li>
            </ul>
        </div>
    </div>
</nav>

This post has been closed. No new replies can be added.

Rafi Benkual about 3 years ago

You should be able to add a jQuery on.click function and toggleclass to do this.

Let us know if you set this up and how it goes for you!

George Bratsos about 3 years ago

 

$("button.menu-icon").on("click", function () {
    if ($(this).parent().hasClass("opened")) {
        console.log("test");
        $(this).parent().removeClass("opened");
        $(this).parent().css("background", "none");
        $(this).css("width", "40px");
    } else {
        $(this).parent().addClass("opened").css("background", "#189acd");
        $(this).css("width", 0);
    }

});

 

I did the trick with one class and javascript.

 

Thanks for answering!