I've never used Bootstrap and I'm trying to make my nav responsive. I've make my nav responsive, but it's not formatted correctly. The logo is not centered and when the section is expanded, all the content is messy. How do I make the content look more professional?
/* Navigation */
.navbar {
background: #007BC4 !important;
padding: 10px !important;
}
.nav a {
color: white !important;
}
#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}
#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}
#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}
#login_button:hover {
background: #007BC4 !important;
}
#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}
#remember {
position: relative;
top: 2px;
}
/* End of Navigation */
<!DOCTYPE html>
<html>
<head>
<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<!-- navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width: 250px; margin-top: -5px;"
src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> <button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button> </li>
</ul>
<!-- Login -->
<div class='navbar-form navbar-right'>
<form action='#' method='post'>
<input type='text' placeholder='Email' id='email_form'>
<input type='text' placeholder='Password' type='password' id='password_form'>
<button class="btn btn-primary btn-sm" id='login_button'>Login</button>
</form>
<input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
<a href='#' id='forgot_password'> Forgot Password? </a>
</div>
</div>
</div>
</div>
<!-- end of navigation -->
<!-- JS Files -->
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
<script type="text/javascript">
</script>
</body>
</html>
I have tried to give professional look. please find the code here:
.navbar {
background: #007BC4 !important;
padding: 10px !important;
}
.nav a {
color: white !important;
}
#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}
#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}
#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}
#login_button:hover {
background: #007BC4 !important;
}
#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}
#remember {
position: relative;
top: 2px;
}
.navbar-brand{
height:auto;
padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
#media (max-width:1000px) {
.navbar-header {
float: left;
width:25%;
}
.navbar-brand{
width: 100%;
margin-top: 12px;
padding:0;
}
}
#media (max-width:767px) {
.navbar-header {
float: left;
width:100%;
margin-left: 0 !important;
}
.navbar-brand{
width: auto;
margin-top: 0px;
}
.navbar-brand img {
max-width: 200px;
}
.navbar-nav {
width: 100%;
float: left;
margin: 7.5px 0;
}
.navbar-nav > li > a{
padding: 10px 0;
}
.navbar-form{
float: left;
}
#sign_up {
position: relative;
left: 50%;
top: 0;
width: 100%;
padding: 8px 0px;
}
#email_form, #password_form{
margin-bottom: 5px;
width: 100%;
}
#login_button{
width: 100%;
}
}
<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> <button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button> </li>
</ul>
<!-- Login -->
<div class='navbar-form navbar-right'>
<form action='#' method='post'>
<input type='text' placeholder='Email' id='email_form'>
<input type='text' placeholder='Password' type='password' id='password_form'>
<button class="btn btn-primary btn-sm" id='login_button'>Login</button>
</form>
<input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
<a href='#' id='forgot_password'> Forgot Password? </a>
</div>
</div>
</div>
</div>
<!-- JS Files -->
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
Related
I've got an annoying space between the navbar and an <h1> header, at the top of the page, that I can't seem to get rid of. I've tried .navbar { margin-bottom: 0; } and section#title-bar { margin-top: 0; }. But, the gap doesn't go away. I'm using bootstrap 4.
Here's my code:
body {
background: #FFF;
padding-top: 4rem; }
body .navbar {
margin-bottom: 0px; }
body .green-text {
color: #1CAA98 !important; }
body .jumbotron {
background: url(../img/site_showcase_bg.jpg) no-repeat top center;
color: #FFF;
height: 500px;
overflow: none; }
body .jumbotron img.app-btn {
width: 40%;
margin-right: 30px;
display: inline; }
body .jumbotron h1 {
margin-top: 60px; }
body .jumbotron p {
margin-bottom: 40px; }
body .jumbotron img.showCase-img {
max-width: 100%; }
body section#middle {
padding: 10px 0 40px 0; }
body section#middle img.demo-1 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-2 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-3 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#feature {
background: #1CAA98;
color: #FFF;
padding: 40px;
overflow: auto; }
body section#feature ul li {
font-size: 22px;
list-style: none; }
body section#feature .big-logo {
width: 100%; }
body section#title-bar {
height: 80px;
background: #1CAA98;
color: #FFF;
padding: 0;
margin: 0; }
body footer {
background: #333;
color: #FFF;
padding: 30px 0 20px 0; }
body footer li {
float: left;
padding: 0 10px 0 10px;
list-style: none; }
body footer a {
color: #FFF; }
body footer p {
float: right; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Adding Font Awesome icons to the app -->
<script src="https://use.fontawesome.com/7333e518d7.js"></script>
<title>Gamma: About</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand green-text" href="#">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<section id="title-bar">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>About Gamma</h1>
</div>
</div>
</div>
</section>
</body>
</html>
Maybe I've overlooked something. Any help is appreciated.
You need to remove the top margin from the h1 tag itself and the bottom margin from the navbar-nav ul list, which is there by default browser styles.
This is due to padding-top: 4em; on the body, You need to use 56px (height of the navbar) instead, like:
body {
padding-top: 56px; // Height of the navbar
}
Have a look at the snippet below:
body {
background: #FFF;
padding-top: 56px; }
body .navbar {
margin-bottom: 0px; }
body .green-text {
color: #1CAA98 !important; }
body .jumbotron {
background: url(../img/site_showcase_bg.jpg) no-repeat top center;
color: #FFF;
height: 500px;
overflow: none; }
body .jumbotron img.app-btn {
width: 40%;
margin-right: 30px;
display: inline; }
body .jumbotron h1 {
margin-top: 60px; }
body .jumbotron p {
margin-bottom: 40px; }
body .jumbotron img.showCase-img {
max-width: 100%; }
body section#middle {
padding: 10px 0 40px 0; }
body section#middle img.demo-1 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-2 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-3 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#feature {
background: #1CAA98;
color: #FFF;
padding: 40px;
overflow: auto; }
body section#feature ul li {
font-size: 22px;
list-style: none; }
body section#feature .big-logo {
width: 100%; }
body section#title-bar {
height: 80px;
background: #1CAA98;
color: #FFF;
padding: 0;
margin: 0; }
body footer {
background: #333;
color: #FFF;
padding: 30px 0 20px 0; }
body footer li {
float: left;
padding: 0 10px 0 10px;
list-style: none; }
body footer a {
color: #FFF; }
body footer p {
float: right; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Adding Font Awesome icons to the app -->
<script src="https://use.fontawesome.com/7333e518d7.js"></script>
<title>Gamma: About</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand green-text" href="#">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<section id="title-bar">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>About Gamma</h1>
</div>
</div>
</div>
</section>
</body>
</html>
Hope this helps!
I have made this div responsive in Bootstrap. But, the styling and formatting doesn't look quite right. When you click on the expand button, I feel like the "Sign Up" and "Login" sections should be in a separate section from the blue and the lines look messed up. How can I make this nav look more responsive and professional?
.navbar {
background: #007BC4 !important;
padding: 10px !important;
}
.nav a {
color: white !important;
}
#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}
#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}
#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}
#login_button:hover {
background: #007BC4 !important;
}
#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}
#remember {
position: relative;
top: 2px;
}
.navbar-brand{
height:auto;
padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
#media (max-width:1000px) {
.navbar-header {
float: left;
width:25%;
}
.navbar-brand{
width: 100%;
margin-top: 12px;
padding:0;
}
}
#media (max-width:767px) {
.navbar-header {
float: left;
width:100%;
margin-left: 0 !important;
}
.navbar-brand{
width: auto;
margin-top: 0px;
}
.navbar-brand img {
max-width: 200px;
}
.navbar-nav {
width: 100%;
float: left;
margin: 7.5px 0;
}
.navbar-nav > li > a{
padding: 10px 0;
}
.navbar-form{
float: left;
}
#sign_up {
position: relative;
left: 50%;
top: 0;
width: 100%;
padding: 8px 0px;
}
#email_form, #password_form{
margin-bottom: 5px;
width: 100%;
}
#login_button{
width: 100%;
}
}
<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> <button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button> </li>
</ul>
<!-- Login -->
<div class='navbar-form navbar-right'>
<form action='#' method='post'>
<input type='text' placeholder='Email' id='email_form'>
<input type='text' placeholder='Password' type='password' id='password_form'>
<button class="btn btn-primary btn-sm" id='login_button'>Login</button>
</form>
<input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
<a href='#' id='forgot_password'> Forgot Password? </a>
</div>
</div>
</div>
</div>
<!-- JS Files -->
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
do you mean like making your button responsive? if your using css, i'm guessing you know html right? make a link. thats what i'm suggesting. and to make it look professional, you basically just have to rely on gut instinct. (colors dude, what colors are professional anyway, beige?)
I am using bootstrap. I need to make this responsive but i couldn't handle it. Specially search bar frustrate me.
I want menu elements collapsed under 992px. Waiting for suggestions. Thanks.
CodePen Link
Example Code:
nav.navbar-default {
background-color: #232323;
margin-right: 1px;
border: 0;
}
div.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
div.navbar-wrapper .container {
padding: 0;
}
div.navbar-wrapper .col {
padding: 0;
}
div.navbar-wrapper .col:first-child {
padding-right: 30px;
}
div.navbar-wrapper .menu-middle {
width: 64.66667%;
}
div.navbar-wrapper .menu-right {
width: 10.33333%;
}
div.navbar-wrapper .logo {
background: url(/assets/img/logo.png) center no-repeat;
background-color: #3d3d3d;
min-width: 100%;
min-height: 100%;
height: 134px;
}
div.navbar-wrapper .logo.navbar-brand {
margin-left: 0;
}
div.navbar-wrapper .logo:hover {
background-color: #3d3d3d;
}
div.navbar-wrapper .logo span.brand-name {
position: absolute;
}
div.navbar-wrapper .nav-wrap .top-nav {
height: 36px;
width: 100%;
display: block;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a {
font-size: 12px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a:hover {
color: #999;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a .fa {
padding-right: 5px;
}
div.navbar-wrapper .nav-wrap .top-nav .dropdown {
background-color: #555555;
margin-right: 2.2px;
}
div.navbar-wrapper .nav-wrap .top-nav .navbar-form {
padding: 0;
margin: 0;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control,
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default {
background-color: #555555;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
padding: 20px 32px;
color: #fff;
font-size: 14px;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control:focus,
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default {
padding: 9px;
font-size: 16px;
outline: 0;
}
div.navbar-wrapper .nav-wrap .main-nav {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 24px 0 24px 15px;
}
div.navbar-wrapper .nav-wrap .main-nav > li > a {
font-size: 14px;
font-weight: 700;
color: #fff;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding-left: 22px;
padding-right: 22px;
}
div.navbar-wrapper .nav-wrap .main-nav > li > a:hover {
background-color: #00a9df;
}
div.navbar-wrapper .nav-wrap .main-nav > li.active a {
background-color: #00a9df;
}
div.navbar-wrapper .nav-wrap .main-nav > li.active a:hover,
div.navbar-wrapper .nav-wrap .main-nav > li.active a:focus {
color: #fff;
}
div.navbar-wrapper .my-cart-wrap {
background-color: #ff9c00;
min-height: 100%;
height: 134px;
display: table;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap {
display: table-cell;
height: 100%;
text-align: center;
color: #fff;
vertical-align: middle;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a {
color: #fff;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a:hover {
text-decoration: underline;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap .fa-shopping-cart {
font-size: 18px;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.my-cart {
font-size: 14px;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.cart-item {
font-size: 12px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- NAVBAR -->
<div class="navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-static-top">
<div class="container navbar-wrap">
<div class="navbar-header col col-md-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 logo" href="#"><span class="brand-name">Project name</span></a>
</div>
<div class="col col-md-8 menu-middle">
<div id="navbar" class="navbar-collapse collapse nav-wrap">
<ul class="nav navbar-nav top-nav">
<li><i class="fa fa-user" aria-hidden="true"></i>My Account
</li>
<li><i class="fa fa-heart" aria-hidden="true"></i>My Wishlist
</li>
<li><i class="fa fa-external-link" aria-hidden="true"></i>Checkout
</li>
<li class="dropdown">
USD <span class="caret"></span>
<ul class="dropdown-menu">
<li>TL
</li>
<li>EURO
</li>
</ul>
</li>
<li class="dropdown">
Turkish<span class="caret"></span>
<ul class="dropdown-menu">
<li>English
</li>
</ul>
</li>
<div class="input-group nav-search-bar">
<form class="navbar-form">
<input type="text" class="form-control" placeholder="Enter your keyword">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</form>
</div>
</ul>
<ul class="nav navbar-nav main-nav text-uppercase">
<li class="active">Home
</li>
<li>Living Room
</li>
<li>Bedroom
</li>
<li>Dinning
</li>
<li>Blog
</li>
<li>Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div class="my-cart-wrap col col-sm-1 menu-right">
<div class="shopping-cart-wrap">
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<br>
<span class="my-cart">My Cart</span>
<br>
<span class="cart-item">0 Item</span>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example:
Use this code for searchbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
I want a responsive navbar with 4 links and a brand logo in the middle. I want the navbar centered in the middle of the browser. But I'm having trouble executing that layout.
How can I achieve it?
.navbar-header {
min-height: 150px;
}
.navbar {
background: transparent;
min-height: 113px;
top: 0px;
font-size: 18px;
width: auto;
border: none;
padding: 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-brand {
padding: 0 15px;
height: 113px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 113px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<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">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#">
<img src="images/brand.png" alt="Brand" width="310" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Start
</li>
<li>Idee
</li>
<li class="hidden-xs">
<a href="#">
<img src="images/brand.png" alt="Brand" width="310" />
</a>
</li>
<li>Leistungen
</li>
<li>Kontakt
</li>
</ul>
</div>
</div>
</nav>
I hope this will help
.navbar-header {
min-height: 150px;
}
.navbar {
background: transparent;
min-height: 113px;
top: 0px;
font-size: 18px;
width: auto;
border: none;
padding: 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-brand {
padding: 0 15px;
height: 113px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 113px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid text-center">
<nav class="navbar navbar-default">
<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">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="images/brand.png" alt="Brand" width="310"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Start</li>
<li>Idee</li>
<li class="hidden-xs"><img src="images/brand.png" alt="Brand" width="310" /></li>
<li>Leistungen</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</nav>
</div>
I suggest you to don't edit bootstrap styles, use your own class.
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
TB3 here, and here's my jsfiddle. As you can see, all the content (the header, the main body and the footer) seem to be contained inside something that is causing it to be padded + centered. I would like all this content to take up 100% the width of the page/viewport.
I suspect that it may have something to do with the navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
...
...perhaps these classes "auto-pad" and "auto-center" by default and need to be overwritten? Any ideas as to where I'm going awry?
You need to remove the overall "container" to container-fluid that you have at the start of your document because that is what is containing and making it center.
$('.orgSelector').dropdown();
$('.orgSelector').tooltip();
.acLogo {
background-image : url("http://placehold.it/250x150");
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.account-wall {
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help {
margin-top: 10px;
}
.new-account {
display: block;
margin-top: 10px;
}
img.user-summary {
max-width: 100%;
height: auto;
}
div.user-summary {
margin: 10px auto;
}
div.user-summary > img {
width: 80px;
height: 80px;
float: left;
margin: 0 5px;
}
div.user-name {
margin: 15px 0 0 0;
font-style: italic;
display: block;
}
div.user-status {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 acLogo" style="height:auto; width:50%;" href="/"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><b>FEATURES</b></li>
<li><b>COMPARE US</b></li>
<li><b>FIZZBUZZ</b></li>
<li><b>FOOBAR</b></li>
<li><b>DOCS</b></li>
</ul>
<form class="navbar-form navbar-right" action="/app/dashboard/search" method="POST">
<ul class="nav navbar-nav navbar-right">
<li><button type="button" class="btn btn-success">Sign up</button></li>
<li><a href="/app/dashboard">
<button type="button" class="btn btn-link">Sign in</button>
</a></li>
</ul>
</form>
</div>
</div>
</nav>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>