Question

158

Hiding a navigation bar with .hide()

rated 0 times [ 163] [ 5] / answers: 1 / hits: 18139 / 9 Years ago, tue, march 24, 2015, 12:00:00

I have searched and searched trying to figure out what is wrong with my code. I would like to hide the navigation bar completely at a certain screen width but I am getting absolutely nothing. JS fiddle and Code Pen can't find anything and safari isn't showing syntax errors. I have only been at this a month, here it is I appreciate any help.

<!DOCTYPE html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <meta http-equiv=X-UA-Compatible content=IE=edge>

    <meta name=viewport content=width=device-width, initial-scale=1>

    <title>No clue what I am doing</title>

    <link href=css/bootstrap.min.css rel=stylesheet/> 

    <link href=stylesheet.css rel=stylesheet type=text/css />     

  </head>

  <body> 

 <nav class=navbar-default>

  <div class=container-fluid>

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class=navbar-header>

      <button type=button class=navbar-toggle collapsed data-toggle=collapse data-target=#bs-example-navbar-collapse-1>

        <span class=sr-only>Toggle navigation</span>

        <span class=icon-bar></span>

        <span class=icon-bar></span>

        <span class=icon-bar></span>

      </button>     

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class=collapse navbar-collapse id=bs-example-navbar-collapse-1>

      <ul class=nav navbar-nav>     

        <li><a href=#>Link</a></li>    

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav> 



     <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js></script>

    <script src=http://code.jquery.com/jquery-2.1.3.min.js></script> 

    <script src=js/bootstrap.min.js></script>

    <script src=java.js type=text/javascript></script>

  </body>

</html>

JAVASCRIPT

$(document).ready() 

var width = function(checkWidth) {

if(window.width>768) {

$(nav .navbar-default).hide()

} else {

$(nav .navbar-default).show()

}

};

width;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

patienceannel

Add To Favorites

Follow

Total Points: 674

Total Questions: 101

Total Answers: 101

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

patienceannel questions

1 React Functional Component: how to use componentDidMount()

Fri, Mar 11, 22, 00:00, 2 Years ago

1 Map of Maps in Typescript / ECMAScript

Tue, Oct 20, 20, 00:00, 4 Years ago

1 Using moment.js to determine if current time (in hour) is between certain hours

Fri, May 29, 20, 00:00, 4 Years ago

1 How to display success message after copying url to clipboard?

Wed, Apr 8, 20, 00:00, 4 Years ago

1 Refactor aliased @ imports to relative paths

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 9 Years ago calicinthias · Accepted Answer

You need to load the script on page load as well as on screen resize. This may help:

function toggleDiv(){



    if ($(window).width() < 768) {



            $(nav.navbar-default).hide();



    }else{



        $(nav.navbar-default).show();



    }



}



$(document).ready(function () {

    toggleDiv();



    $(window).resize(function(){

        toggleDiv();

    });



});

OR you can just use media queries like this:

@media (max-width: 768px) {

    .navbar-default {

        display: none !important;

    }

}

@media (min-width: 769px) {

    .navbar-default {

        display: block !important;

    }

}