Menu bar will dissapear after 768px

Question

I have some difficulty on the responsiveness of a page.

As you can see in the following code when I inspect responsiveness using Google developer tool, the menu bar will disappear after the width go below 768px?

But I want really have the menu bar in the smaller screen like phones with the width of 414px ...

/*these are classes, put in class declaration*/
<!--just for the About and data html sheets-->

.navbar,.navbar-collapse,.navbar-brand,.nav,#aboutlink,#print-link{
    background: #332A85;
    color: #ffffff;
    text-align: right;
}

#menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
    transition-property: background-color, color;
    transition-duration: .2s;
    transition-timing-function: ease-out;
    background-color: #332A85;
    color: #fff;
  }

#print-link {
   pointer-events: none;
    cursor: default;
 }


.ccusa_container{
  padding-top: 12em;
  padding-left: 12em;
  padding-right: 12em;
  margin-bottom: 10px;
  color: black;
  font-size: 15px;
  font-family: 'Open Sans';
  text-align: justify;
  background-color: white;
}

.jumbotron {
  background-color: black;
  border: 2px solid black;
  text-align: center;
  height: 450px;
  color: white;
  font-family: 'Open Sans', sans-serif;
  padding-top: 12em;
  padding-left: 12em;
  padding-right: 12em;
  margin-bottom: 10px;
}

/*-- # = ids -*/

html, body {
    height: 0%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    background-color: white;
    color: black;
}


h2, h3 {
    font-size: 1.2em;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}


p {
    margin: 10px;
    text-align: left;
}


a.header1 {
   font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
      color: #fff;
}

a.body1{
    color: purple;
}



hr {
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 2px;
}


.closeinfo {
    padding-top: 8em;
    padding-left: 8em;
    padding-right: 8em;
    margin-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    background-color: black;
    color: #fff;
    text-align: center;
    height: 300px;
}


table {
    border-collapse: collapse;
    width: 100%;
}

th, td, th {
    padding: 8px;
    text-align: left;
    border: 1px solid black;
}

th {
    text-align: left;
}

/*mobile responsivenes*/
@media (max-width: 550px) {
  navbar-fixed-top {
    width: 400px;
  }
#menu {
    width: 400px;
    position: sticky;
  }
h4 {
    display: none;
  }
.navbar, .navbar-fixed-top, .navbar-header {
    width : 100%;
    background: #332A85;
    color: #332A85;
  }

.mapboxgl-canvas-container {
  align-content: center;
}
}

<!DOCTYPE>
<html>
<head>
 <meta charset = 'utf8'>
 <title>Operations - About</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <!-- Begin Mapbox requests -->
 <script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
 <link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
 <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
 <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
 <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
 <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
 <!-- Style Sheets -->
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="stylesheet" type="text/css" href="css/reset.css">
 <!-- end project-specific asset calls -->
</head>
<body>
 <div>
  <!--Navbar-->
  <nav class="navbar navbar-fixed-top" role="navigation">
   <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
     <div class="navbar-brand"><a href="index.html" class="header1"> Project Work</a></div>
    </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 navbar-right">
      <li class="nav"> <a href="index.html" class="header1">Map</a></li>
      <li class="nav"> <a href="about.html" class="header1">About</a></li>
      <li class="nav"> <a href="data.html" class="header1">Data</a></li>

     </ul>
    </div>
   </nav>
  </div>

  <!----jumbotron---->
  <div class="jumbotron">
   <h3>vitae non volutpat mi nisl amet in sapien enim eget quam sodales nunc nulla ligula tortor integer pretium vitae sit purus ultricies nec vitae nec quam nunc mauris felis turpis blandit risus nunc felis ornare morbi non id cras per eros dignissim orci aenean elit libero sed morbi pellentesque a libero morbi curabitur in in at cum aliquam sed in libero nam mi amet tincidunt sit sit in eros arcu bibendum tortor eleifend vulputate nisl duis turpis erat tincidunt rhoncus sit sit nulla nascetur in in vulputate neque dignissim nisl mauris wisi ac elit esse per diam nam morbi eros auctor ut lacinia libero malesuada justo sed odio montes dolor duis in maecenas faucibus amet
   </h3>
  </div>

  <!----TEXT---->
  <div class="col-md-12 text-justify">
   <div class="col-md-1 justify"></div>
   <div class="col-md-10 justify" style="background-color:##C0C0C0">
   </div>
   <div class="col-md-1 justify"></div>
  </div>
  <!--Center buttons: GitHub MapBox ATTOM-->
  <div class="col-md-12 text-center" style="background-color:##C0C0C0">
   <div class="col-md-1 text-center"></div>
<!----TEXT---->
<div class="bio container-fluid" id="ccusa_container">
 <!----TEXT---->
 <div class="col-md-12 text-justify">
  <div class="col-md-1 justify"></div>
  <div class="col-md-10 justify">
   <br><br>
   </h3>
  </div>
  <div class="col-md-1 justify"></div>
 </div>
 <div class="col-md-12 text-center">
  <div class="col-md-2 text-center"></div>
  <div class="col-md-4 text-center">
   <p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
    <br>
    <center align="center"><a href="https://twitter.com/CCharitiesUSA" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @CCharitiesUSA</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
    <br>
     </p>
   </div>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
   <br>
 <br><br>
  </div>
  <div class="col-md-2 text-center"></div>
 </div>
 <br><br>
</div>
</body>
</html>

How we am I improve the responsiveness is my question?

Since you use bootstrap there is a default of navbar and when the screen's width is small the navbar will change accordingly. You will need to change all the `@media` selectors that related to that menu (or use some template that will fix it for you). — Dekel, Aug 26 '17 at 17:13

score 1 · Accepted Answer · answered Aug 26 '17 at 17:54

There are 2 solutions to your problem.

The first one and the nice one is something that bootstrap already supports, you're just missing some code to make it work. You have a working demo here

You just need to add the button that will be displayed when the menu is collapsed. Please check the Fiddle example. I also applied some CSS to .navbar-header and .navbar-default .navbar-nav > li > a just to have a example look nice.

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

In case you don't want the collapsed menu supported by Bootstrap, you will have to hardcode some CSS classes which is a bit ugly. Here you have an answer that might help you.

Menu bar will dissapear after 768px

1 Answers1