CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designnavbar
Apple John
Apple John

Reputation: 3

Navbar not showing and working on mobile

I have a website with navbar button and dropdowns, but when i tested it on my mobile or smaller devices, i can't see the navbar, no buttons cant be press and no details about the navbar at all. I checked multiple times if im missing tags but can't see anything missing.

My navbar script:

<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>Sample</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </head>

  <body background="images/bg.jpg">
    <nav class="navbar navbar-light" style="background:whitesmoke" role="navigation">
      <div class="navbar-header">
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">About Us</a></li>
          <li class="active"><a href="#">Issuances</a></li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Masterlist of School <strong class="caret"></strong></a>
            <ul class="dropdown-menu multi-level">
              <li class="dropdown-submenu">
                <a href="#">Masterlist<br> S.Y. 2016-2017</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Public School</a></li>
                  <li><a href="#">Public 2 School</a></li>
                </ul>
            </ul>
            </li>
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Others <strong class="caret"></strong></a>
            </li>
            <li class="active"> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li>
            <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
              <div class="modal-dialog">
                <div class="loginmodal-container">
                  <h1>Login</h1>
                  <br>
                  <?php if(isset($error_msg)){ echo $error_msg; } ?>
                    <form action="" method="post" name="login">
                      <input type="text" name="username" placeholder="Username" required>
                      <input type="password" name="password" placeholder="Password" required>
                      <input type="submit" name="submit" class="login loginmodal-submit" value="Login">
                    </form>
                </div>
              </div>
            </div>
        </ul>
      </div>
  </body>
</html>

Upvotes: 0

Views: 154

Answers (1)

Nikhilesh Shivarathri
Nikhilesh Shivarathri

Reputation: 1670

I see that your HTML is not correct. For the mobile view use a button with navbar-toggle class, it should have a data-toggle attribute and a data-target attribute specifying the ID of the navbar links container.

In your example, You should use something like this.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
</button>

I've made pretty few changes to your code to make it work. check the snippet am attaching here. 

<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>Sample</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    .thumbnail {
      background: whitesmoke;
    }
    
    a:hover {
      color: black;
    }
    
    .navbar-nav>li>.dropdown-menu {
      background-color: whitesmoke;
    }
    
    .navbar-nav>li>.dropdown-menu a {
      color: black;
    }
    
    .dropdown-submenu {
      position: relative;
    }
    
    .dropdown-submenu>.dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      margin-left: -1px;
      background-color: whitesmoke;
      -webkit-border-radius: 0 6px 6px 6px;
      -moz-border-radius: 0 6px 6px;
      border-radius: 0 6px 6px 6px;
    }
    
    .dropdown-submenu:hover>.dropdown-menu {
      display: block;
    }
    
    .dropdown-submenu>a:after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color: black;
      margin-top: 5px;
      margin-right: -10px;
    }
    
    .dropdown-submenu:hover>a:after {
      border-left-color: #fff;
    }
    
    .dropdown-submenu.pull-left {
      float: none;
    }
    
    .dropdown-submenu.pull-left>.dropdown-menu {
      left: -100%;
      margin-left: 10px;
      -webkit-border-radius: 6px 0 6px 6px;
      -moz-border-radius: 6px 0 6px 6px;
      border-radius: 6px 0 6px 6px;
    }
    
    button.navbar-toggle {
      border: 2px solid #ddd;
    }
    
    .navbar-toggle .icon-bar {
      background-color: #333;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body background="images/bg.jpg">
  <nav class="navbar navbar-light" style="background:whitesmoke" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" ">
				<span class="icon-bar "></span>
				<span class="icon-bar "></span>
				<span class="icon-bar "></span>                        
		    </button>
      <a class="navbar-brand " href="# ">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1 ">
        <ul class="nav navbar-nav ">
          <li class="active "><a href="# ">About Us</a></li>
          <li class="active "><a href="# ">Issuances</a></li>
          <li>
            <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Masterlist of School <strong class="caret "></strong></a>
            <ul class="dropdown-menu multi-level ">
              <li class="dropdown-submenu ">
                <a href="# ">Masterlist<br> S.Y. 2016-2017</a>
                <ul class="dropdown-menu ">
                  <li><a href="# ">Public School</a></li>
                  <li><a href="# ">Public 2 School</a></li>
                </ul>
            </ul>
            </li>
            <li>
              <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Others <strong class="caret "></strong></a>
            </li>
            <li class="active "> <a href="# " data-toggle="modal " data-target="#login-modal ">Login</a></li>
            <div class="modal fade " id="login-modal " tabindex="-1 " role="dialog " aria-labelledby="myModalLabel " aria-hidden="true " style="display: none; ">
              <div class="modal-dialog ">
                <div class="loginmodal-container ">
                  <h1>Login</h1>
                  <br>
                  <?php if(isset($error_msg)){ echo $error_msg; } ?>
                    <form action=" " method="post " name="login ">
                      <input type="text " name="username " placeholder="Username " required>
                      <input type="password " name="password " placeholder="Password " required>
                      <input type="submit " name="submit " class="login loginmodal-submit " value="Login ">
                    </form>
                </div>
              </div>
            </div>
        </ul>
      </div>
	</div>
	</nav>
      
  </body>

I've added a border style to navbar-toggle button to make it appear on the screen.

It is not working here for some unknown reason, just try pasting the code and run it in the browser. It should work as expected.

Upvotes: 1

Related Questions