CODEWITHSUNDEEP
javascriptjqueryhtmlcss
akshaybharwani
akshaybharwani

Reputation: 33

Foundation 6: Hide the Top Bar when link is clicked

I'm using Foundation 6 for a one-page website. And I'm using a Top Bar to take users to different sections of the website. So when visiting the website on mobile, when I click a link from the collapsed Top Bar, I want the Top Bar to hide after taking the user to a certain section of the website.

Here's my HTML:

<div data-sticky-container>
   <div data-sticky data-sticky-on="small" data-options="marginTop:0.9;" style="width: 100%">

     <div class="top-bar">
      <div class="top-bar-title">
        <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
          <span class="menu-icon dark" data-toggle></span>
        </span>
      </div>
      <div id="responsive-menu">
        <div class="top-bar-section">
            <ul class="menu" data-magellan>
                <li class="title"><a class="title-link" href="#home">HOME</a></li>
                <li class="title"><a class="title-link" href="#events">EVENTS</a></li>
                <li class="title"><a class="title-link" href="#about">ABOUT</a></li>
            </ul>
        </div>
      </div>
    </div>

   </div>
</div>

I could have achieved this functionality by using this (I think):

$(function () {
        $('.title-link').on('click', function () {

            $("#responsive-menu").css({display: none});

        });
    });

But the problem is when I click the menu icon, Foundation adds and inline style of display: block; and I can't seem to change it through to JS.

Is there a way to override the inline styles, or should I use a different layout? Thanks for the help!

Upvotes: 2

Views: 768

Answers (2)

Mehran Torki
Mehran Torki

Reputation: 987

.css() overrides inline style. Just change this line : 

$("#responsive-menu").css({display: none});

To :

$("#responsive-menu").css({"display": "none"});

Similar topic for more info : How to override inline css through javascript?

Upvotes: 1

Pedram
Pedram

Reputation: 16575

Try this one:

JS:

$(function () {
        $('.title-link').on('click', function () {

            $("#responsive-menu").toggleClass('myStyle');

        });
    });

CSS:

.myStyle {
display: block!important;
}

or

.myStyle {
display: none!important;
}

depend what you want to do.

Upvotes: 0

Related Questions