I'm trying to get the navbar menu to appear in the 'header-container' menu, but for some reason, the navbar links flow outside (before revising browser window). I cannot figure out why but I suspect it has something to do with this line:
div class="collapse navbar-collapse navHeaderCollapse"
Whenever I add a float left to the navHeaderCollapse the links inside. Adding an overflow: none; just hides the overflow but there shouldn't be any overflow in the first place.
Why are the links not staying inside the header-container div?
#header-container{
width: 960px;
height: 50px;
background: #ff0;
margin: 0 auto;
}
<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header id="header-container">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</div>
</header>
Just erase the fixed width: 960px; from your #header-container CSS rule
https://codepen.io/anon/pen/LjVjqE
From my point of view, you are adding .container div inside your structure. It inherits rules from bootstrap and breaks your layout.
<header id="header-container">
<div class="navbar navbar-default navbar-static-top">
<div class="container"> <!-- remove this element, or change name-->
<div class="navbar-header">
The problem is that you're adding a fixed width to a an element that contains the Bootstrap header. When .navbar-right (defined by Bootstrap) tries to float to the right, it breaks the layout unless the parent has a width of 100% (the default). Simply remove your width specification on #header-container and your links will correctly sit within your header:
<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header id="header-container">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</div>
</header>
**EDIT**
In order to have the navbar occupy a maximum width of 960px, you're looking to modify the predefined .container class, rather than creating a brand new one. Note that navbar-static-top forces you to have a full-width (as it's static), so you'll also need to remove that.
.container {
max-width: 960px;
}
<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header id="header-container">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</div>
</header>
Hope this helps! :)
Related
I have a fixed navbar and the body is scrollable. I want to add a layer on top of navbar without affecting the scrollable capability but my navbar is fixed at the top. How can I solve this.
Here is my code
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body{
padding-top: 40px;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
<li>Our Services
<li>Gallery
<li>Faq
<li>ContactUs
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
You can wrap your content in navbar-fixed-top class.
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body {
padding-top: 90px;
}
.root {
min-height: 100vh;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<div class="navbar-fixed-top">
<p>I am top of navbar</p>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
<li>Our Services</li>
<li>Gallery</li>
<li>Faq</li>
<li>ContactUs</li>
</li>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
</div>
<div class="root">
<p>MY HEIGHT IS TOO LONG</p>
</div>
</body>
I tried to make top navbar left side logo and center text and right text as size of logo. i able to make left left side logo on top navbar and text on right side of the top navbar but unable to make some text in the center other top navbar, even facing the problem to make right side text(i tried to add clearflex) size as logo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->
<link
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></a>
</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 class="active"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I tried to do like this image:
Add these styles
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></a>
</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 class="active"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
Ok,i made header and logo :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand" href="#"><img src="images/test1.png" class="img-fluid"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
and CSS:
.navbar-nav {
min-height: 110px;
}
.navbar-brand img {
max-width: 100%;
height: auto;
}
The question is how to my logo image be responsive as I resize the browser and how to header be responsive(when decrease size)? As you can see I put height in external CSS file 110px,and now I want to logo enter inside header(like in full size browser) when resize into small screens. I hope you get it
To keep your header image inside your header at all times you can simply apply max-height: 100%; to your image. This will stop it from overflowing its container. Here is an example: https://jsfiddle.net/rktr4q5v/1/
You can see that the images are both quite small. This is because the class navbar-brand has a height of 50px applied. If you remove this then your images will expand to their original width but remain inside the navbar. Here is an example of this: https://jsfiddle.net/rktr4q5v/2/
If you need to do specific size styling for your logos then you will need to use media queries to change the size of your logo at different screen widths. The documentation for this can be found here and a beginners guide can be found here
I have also fixed some of your mistakes. You can refer this.
Adjust your Logo Size in navbar-brand style tag. If requires
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand" href="#"><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" class="img-responsive img-rounded" style="max-height: 40px; margin-top: -15%;"></a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The navbar doesn't align properly to the left and right-hand margin of my website. I am using Bootstrap's 'pull-left' & 'pull-right' functions.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microbiology Bootstrap!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Contact</li>
</ul>
<ul class="pull-right">
<li>By Industry</li>
<li>By Matrix</li>
<li>By Vial</li>
<li>All Studies</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Microbiology <br>Bootstrap</br></h1>
<p>Find the validation study you need. <br>Search by industry, matrix or vial.</br></p>
Learn More
</div>
</div>
CSS:
.nav {
background-color: #efefef;
}
.nav a {
color: #5a5a5a;
font-size: 12px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
Illustration:
Home | Contents By Industry | By Matrix | By Vials etc
Microbiology
Bootstrap
Any help would be greatly appreciated!
Since you are already loading bootstrap, you can achieve the same thing by using bootstrap's navigation. You will need two classes navbar-left and navbar-right on navbar's ul. Here is a sample code taken from bootstrap's documentation.
<nav class="navbar 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" 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>
<a class="navbar-brand" href="#">Brand</a>
</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-left">
<li class="active">Link</li>
<li>Link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You will have to add classes accordingly to your code. Add navbar class to the div having class nav.
Use navbar-left , navbar-right instead of pull-left and pull-right
I am creating a navigation bar and placed a banner below it but they are not 100% wide. I want both of them to wrap the 100% width.
HTML(header.php)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="col-md-12" style="margin-bottom: 0px;">
<nav class="navbar navigation_bar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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">
<div class="col-md-3"></div>
<div class="col-md-6">
<center>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>MENUITEM1</li>
<li>MENUITEM2</li>
<li>MENUITEM3</li>
<li>MENUITEM4</li>
<li>MENUITEM5</li>
<li>MENUITEM6</li>
<li>MENUITEM7</li>
</ul>
</center>
</div>
<div class="col-md-3"></div>
</div><!-- /.navbar-collapse !-->
</div><!-- /.container-fluid !-->
</nav>
</div>
Index.php
<?php include "header.php" ?>
<div class="col-md-12">
<img class="img-responsive" src="img/banner_1.png" width="100%">
</div>
Note: I may have added few additional classes but they are used to change the colors only, layout is not at all touched.
Also, i tried to add row class above col-md-12 but it result in scrolling page left to right and vice versa.
I am wondering how can i make the nav bar and banner 100% wide. After inspecting col-md-12 its width is 100% but i am not sure why it is not working.
Thanks in advance.
JSFiddle
col-md-12 has a default padding values....padding-left: 15px and padding-right: 15px.
If you want to remove these defaults for bootstrap, add an additional class to the same div with padding: 0.
Here's a JSFiddle: http://jsfiddle.net/v42e2/
as of Bootstrap 3.1 you can use the class container-fluid to have things stretch across the entire screen
<div class="container-fluid">
<div class="row">
//your code for nav here
</div>
</div>