Hide element onclick but only when window is bellow 960

[Anonymous]

I’m transforming a navigation bar to mobile with media queries and its pretty much set up. In the mobile version i want the navigation ul to slide back up when the user clicks a nav link. I can get this to work but the problem is that it also hides when the screen is above 990px when the user clicks a nav link. So when i click a navigation at any screen size the navigation slides up and i only want that event to be triggered when the screen is bellow 990px. How can i achieve this? here is the code i have so far.

/* mobile navigation */ /* show mobile tabs when toggle nav mobile button is clicked and when browser width is over 990px */ /* toggle mobile navigation when nav button is clicked */ $("#toggle-mobile-nav").click(function() { $("#nav-tabs-list").slideToggle(); });

    var browserWidth = $(window).width();

    $(window).resize(function() {
        browserWidth = $(window).width();
        if (browserWidth > 990) {
            $("#nav-tabs-list").show();
        }
    });
    /* always show drop menu when on mobile version (when browser width is below 960px) */
    $(document).ready(function() { 
      fadeMobile();  
    });

    $(window).resize(function() { 
      fadeMobile();  
    });

    function fadeMobile() {
      browserWidth = $(window).width(); 
      if (browserWidth < 990) { 
        $('.header-drop-menu').show(); 
      }
    }

[sadunaresh]

you are missing else block,

you are not mentioning what to do with #nav-tabs-list when browserwidth is other than <990px.

there are two ways first is make the div to display none when browser width is less than 990px

solution 1

or add an else block like below

Your text to link here…

[Anonymous]

I don’t fully understand. When i click the over 990 screen width the navigation still hides. How would i apply the code you gave me?

[sadunaresh]

hi Jarolin,

looking at your question so many assumptions come to my mind… It would be really helpful in helping you if you put your code on codepen as I did in my last post…

Thank You

[Anonymous]

http://codepen.io/Jarolin/pen/qykCa

If you size the window below 990 and click on toggle, the mobile nav slides down and when i click the mobile nav link it slide up which is what i’m trying to do. The problem is that when you resize the window above 990 the navigation tabs also hide and i don’t want that to happen.

[sadunaresh]

check this out

I have edited below part

//SLIDE UP WHEN MOBILE TAB IS CLICKED ONLY, NOT WHEN DESKTOP NAV IS CLICKED
$("#nav-tabs-list li").click(function() {
if(browserWidth<990){
$("#nav-tabs-list").slideUp();
}
});

included a condition for list items to slide up only when browser width is less than 990px..

hope this is what you expected…

[Anonymous]

definitely is. Thank you, it works perfectly.

[Author]

Posts