Top Navigation Bar resizing
Question
When I resize the browser using the "responsive window" in inspect element, the top navigation also becomes smaller. I want to maintain the size . Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
background-color: lightblue;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen !important;
}
}
body { padding-top: 70px; }
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</body>
</html>
Here is my problem after resizing the image using inspect element's responsive
2 answers
solution1
1 ACCPTED 2017-02-11 06:29:29
It seems that only chrome zooms out, in Firefox it is ok. So just add
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
at the head of your page, then it will be seen as the following.
solution2
0 2017-02-11 06:27:46
responsive issue because of meta in head...
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,intial-scale=1"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> body { background-color: lightblue; } @media screen and (min-width: 480px) { body { background-color: lightgreen !important; } } body { padding-top: 70px; } </style> </head> <body> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href= "#" class="navbar-brand">Brand Name</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav pull-right"> <li class="active "><a href="#">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </div> </body> </html>
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.
Related Question
Navigation bar that stays on top
QML Navigation Bar isn't resizing
Navigation Bar Jumps to the Top Immediately
A Vertical Navigation Bar Moving to The Top
Bootstrap 3 Fixed Top Navigation Bar
HTML / CSS top horizontal navigation bar
Bootstrap Fixing navigation bar on top when scrolling
Selected Heading goes behind the Top navigation bar
How to make the navigation bar fixed on top on scroll
responsive top-bar navigation with mootools
Related Tags