Bootstrap 4 fixed-top exceeds container limit
up vote
0
down vote
favorite
I am stuck at my first personal project.
I have been trying for hours to get the bootstrap 4 navbar fixed at the top while the body is centered( max widith 970px). Everything works well until fixed-top is included, and I included all the suggestions but no luck. I tried body padding 50px , enclose the navbar in container. Here is my code
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
html css navbar responsive
add a comment |
up vote
0
down vote
favorite
I am stuck at my first personal project.
I have been trying for hours to get the bootstrap 4 navbar fixed at the top while the body is centered( max widith 970px). Everything works well until fixed-top is included, and I included all the suggestions but no luck. I tried body padding 50px , enclose the navbar in container. Here is my code
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
html css navbar responsive
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am stuck at my first personal project.
I have been trying for hours to get the bootstrap 4 navbar fixed at the top while the body is centered( max widith 970px). Everything works well until fixed-top is included, and I included all the suggestions but no luck. I tried body padding 50px , enclose the navbar in container. Here is my code
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
html css navbar responsive
I am stuck at my first personal project.
I have been trying for hours to get the bootstrap 4 navbar fixed at the top while the body is centered( max widith 970px). Everything works well until fixed-top is included, and I included all the suggestions but no luck. I tried body padding 50px , enclose the navbar in container. Here is my code
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</nav>
html css navbar responsive
html css navbar responsive
edited Nov 10 at 21:26
ksav
3,52821227
3,52821227
asked Nov 10 at 20:44
Gora
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Seems like all you have to do is wrap the content that follows the nav in a .container
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Seems like all you have to do is wrap the content that follows the nav in a .container
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
add a comment |
up vote
0
down vote
Seems like all you have to do is wrap the content that follows the nav in a .container
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
add a comment |
up vote
0
down vote
up vote
0
down vote
Seems like all you have to do is wrap the content that follows the nav in a .container
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
Seems like all you have to do is wrap the content that follows the nav in a .container
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
padding-top: 50px;
}
.content {
background-color: #fff;
max-width: 970px;
margin: 0 auto;
}
.form-inline {
display: inline-block;
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #555;
padding-left: 0;
font-size: 20px;
padding-right: 50px;
font-family: 'Raleway', sans-serif;
}
.navbar .navbar-brand b {
font-weight: bold;
color: #eb5844;
}
.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
color: #f08373 !important;
}
.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
color: #eb5844 !important;
background: transparent !important;
}
.search-box {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-md navbar-expand-lg navbar-light">
<div class="container">
<div class=" navbar-header d-flex col">
<a class="navbar-brand" href="#">LogoHere</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Service </a></li>
<li><a href="#" class="dropdown-item">Serv </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
<li><a href="#" class="dropdown-item">service </a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Books</a></li>
<li class="nav-item "><a href="#" class="nav-link">Exams</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-google-plus"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-slack"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
<main class="container">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
edited Nov 11 at 10:54
answered Nov 10 at 21:38
ksav
3,52821227
3,52821227
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
add a comment |
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
Thanks but the problem is not on the content following the nav but the nav itself exceeds the limit. I couldn't get the nav fixed at the top at the same within the max width (970px)
– Gora
Nov 11 at 8:57
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243235%2fbootstrap-4-fixed-top-exceeds-container-limit%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown