How to reset inline css applied by jquery?

Tags: javascript,jquery,html,css,dom

Problem :

I've updated my self-made responsive menu but I have a problem with the menu disappearing when resizing.

When I downsize my window below 1100px width and open the responsive menu, everything is fine. However when I close the responsive menu Jquery applies a display: none inline attribute.

This makes my screen disappear when I resize back to full width.

I need some way to override or remove the inline css with everything working properly. Can anybody suggest how to fix this?

Codepen example

<script>
    $(document).ready(function() {
        $('.button-open').click(function() {
            $('.navigational-menu').slideToggle('test');
            $(this).toggleClass('button-close');
        });
    });
</script>

---

Solution :

If you have no other inline css property try the updated Pen

http://codepen.io/valentinpalkovic/pen/rVOVjR

<script>
    ....
    $('.navigational-menu').slideToggle('test', function() {
        if($('.navigational-menu').css("display") == "none"){
            $('.navigational-menu').removeAttr("style");
        }
    });
    ....
</script>