Make Responsive Navigation Bar
Question
I am working on web-development project. I can not make my website responsive for mobile devices.
For desktop, the navigation bar looks right, for mobile devices nav-bar does not collapse.
Below snippet is the navigation bar from W3Schools examples-
<body>
<div class="nav navbar" body {background-color:#000000;font-weight: bold;font-size: 15px;color: red;} >
<ul class="nav nav-tabs">
<li class="active"><a class="t1" data-toggle="tab" href="#tab_google_search">Search</a>
</li>
.. ..
<div class="tab-content">
<div id="tab_google_search" class="tab-pane fade in active">
<iframe id="google_search" src="https://www.google.com/" frameborder="0" scrolling = "yes"></iframe>
</div>
</div>
What are the possible changes to be made to work my website for mobile devices
2 answers
solution1
0 2020-04-07 01:12:49
You want to make collapsible navigation bar. It is called media query, by which the website nav-bar is sized against screen.
Bootstrap is the best tool for making responsive website. For Bootstrap you do not require media query, and this framework is designed for speed-up development process. The below snippet is copied from another answer , only for understanding purpose.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="navbar navbar-inverse"> <div class="container"> <a href="#" class="navbar-brand">MyWebsite</a> <button class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav navbar-left"> <li><a href="">Home</a> </li> <li><a href="">about</a> </li> <li><a href="">contact</a> </li> <li><a href="">search</a> </li> </ul> </div> </div> </div>
Run the snippet in full-screen, to avoid mobile-view of the website
solution2
0 2020-04-07 05:25:23
Try this:
<,DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">My WebsiteName</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <br> <div class="container"> <h3>Hello World</h3> </div> </body> </html>
When the screen size reaches equal to the mobile device, this navbar will get converted to a collapsible navbar with three horizontal lines within.
Note: I have used Bootstrap v4.0 (latest framework).
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.