I am trying to figure out a way to combine an animated hamburger menu in bootstrap 4 with a full screen menu overlay. Problem: when I set data-toggle="modal" on the button, I get the modal overlay but the animation of the collapsed hamburger menu ("X") in the background (i.e. underneath the overlay) becomes inactive.
On the other hand, when I replace the "modal" attribute with "collapse", the hamburger animation works fine but the overlay menu does not appear.
Is there a simple way to combine these two functions?
This is the CSS:
body {
padding-top: 5rem;
margin: 0;
background: url(../assets/original/test.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
.base-layout {
padding: 3rem 1.5rem;
text-align: center;
}
/* Navbar responsive toggler + hamburger animation */
.navbar-toggler {
border: none;
background: transparent !important;
float: left !important;
margin-left: 15px;
margin-right: 0;
}
.navbar-toggler:focus {
outline: none;
background: transparent !important;
}
.navbar-toggler .icon-bar {
background-color: #fff;
transform: rotate(0deg) translate(0px, 0px);
transition: ease all .2s;
}
.navbar-toggler .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggler .icon-bar+.icon-bar {
margin-top: 4px;
}
/*.icon-bar:nth-child(2) {
width: 16px;
transition: ease all .2s;
}*/
.navbar-toggler:hover>.icon-bar:nth-child(2) {
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:active>.icon-bar:nth-child(2) {
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
transition: ease all .2s;
}
/* Modal */
.modal-nav-content {
width: 100%;
height: auto;
}
.modal-nav-body {
margin-top: 100px;
}
.modal-nav-body ul {
list-style-type: none;
color: white;
margin: 0;
padding: 0;
width: 100%;
}
.modal-nav-body ul li {
text-align: center;
font-size: 130%;
padding: 8px;
text-transform: uppercase;
}
This is the HTML code:
<head>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-transparent fixed-top">
<span class="navbar-brand" href="#"></span>
<!-- data-toggle="modal" :: COLLAPSE -->
<button type="button" class="navbar-toggler collapsed btn-open" data-toggle="modal" data-target="#nav-modal" aria-controls="nav-modal" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button>
</nav>
<!-- Modal -->
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<ul class="wrap-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #4</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<div class="base-layout text-white text-left">
<h1>Title</h1>
<p class="lead">Lead text...</p>
</div>
</main>
<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
Related
I want to make my navbar links have a darker background color whenever I hover my mouse over them. It is working OK, but when I change padding (to 0px in this case) it starts to flicker: (View on full screen for better effect)
Also, the image link is not the same height as the other links(And when collapsed, it has this right blank space), and I can't get it in same line using the current styling rules.
**Edit: It's caused by the padding:0px!important, but that's because I do not want the hovering background to take the entire height. How to make the hovering background with less height?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
What's causing that? How can I fix it?
Thanks
The flickering is caused because when you hover, you are removing the padding, which pulls the element out from under the cursor. This then stops the hover and reapplies the padding which puts it back under the cursor, triggering the hover state. Rinse and repeat.
To stop the flicker, you need these two styles to work together:
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
If you want the hovering background to take less height, replace the part that you don't want the background on with margin. This might look like:
#media (min-width: 768px) {
.navbar-nav > li > a {
padding: 6.5px 8px; /* top/bottom, sides */
margin: 20px 0px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
In short, don't make your box size change on hover, and if you don't want background, use margin instead of padding
The padding in the hover is causing the problem: padding: 10px!important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
I have trouble understanding how to properly align social media icons (left) and logo (center) in mobile / table view in bootstrap. I want the logo and some icons beside the burger menu to be visible even when switching to mobile view, but it does not align properly for me and it shows vertically instead of horizontally when going into mobile view.
Desktop View:
Mobile View:
This is my css/html:
/* Style for "Signup Rectangle" */
.sign-up:hover, .log-in:hover {
cursor: pointer;
border: 1px solid #ffffff;
text-align: center;
}
/* Style for "SIGN UP" */
.sign-up {
color: #ffffff;
font-family: Raleway;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
/* Style for "LOG IN" */
.log-in {
color: #ffffff;
font-family: Raleway;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
/* Style for "Linkedin, Twitter, Facebook" */
.instagram-logo, .twitter-logo, .facebook-logo {
width: 20px;
height: 21px;
filter: invert(100%);
}
.logo {
width: 128px;
height: 53px;
}
.navbar-container {
padding-top: 18px !important;
}
.panorama {
padding-top: 140px;
height: 100vh;
min-height: 400px;
}
.affix {
-webkit-transition: padding 0.2s ease-out;
-moz-transition: padding 0.2s ease-out;
-o-transition: padding 0.2s ease-out;
transition: padding 0.2s ease-out;
}
.affix-top {
background: transparent;
border-color: transparent;
padding: 15px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.icon-bar {
background-color:#fff !important;
}
.affix-top .nav > li > a {
color: #000;
filter: invert(100%);
}
.navbar-nav > li > a {
padding-bottom: 35px;
}
.affix-top .navbar-collapse {
border-color: transparent;
box-shadow: initial;
}
/*************MEDIA QUERIES **************/
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
<nav>
<div class="container-fluid">
<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="400">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-container">
<li><img class="instagram-logo" src="{{route('cacheImage', ['newDesign', 'instagram.png']) }}"></li>
<li><img class="facebook-logo" src="{{route('cacheImage', ['newDesign', 'facebook.png']) }}"></li>
<li><img class="twitter-logo" src="{{route('cacheImage', ['newDesign', 'twitter.png']) }}"></li>
</ul>
<ul class="nav navbar-nav navbar-header navbar-center">
<li>
<a href="#">
<img class="na-logo" alt="" src="{{route('cacheImage', ['newDesign', 'logo.png']) }}">
</a>
</li>
</ul>
<ul class="nav navbar-right navbar-nav navbar-container">
<li>
<a class="sign-up">SIGN UP</a>
</li>
<li>
<a class="log-in">LOG IN</a>
</li>
</ul>
</div>
<!-- Mobile Burger Menu -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-burger-menu">
<span class="sr-only">Navigation Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul id="navbar-burger-menu" class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- Mobile Burger Menu End -->
<!-- Mobile / Table view End -->
</div>
</div><!-- /.navbar -->
</div><!-- /.container-fluid -->
<section class="panorama" style="background: url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;">
<div class="container">
<h1 class="text-center">Hello.</h1>
</div>
</section><!-- panorama navigation section end -->
</nav><!-- .navbar end -->
Anyone can help out with this?
Okay, here ya go. Left menu on left, logo centered, login on right. Hamburger stack below that opens a full width menu.
I floated the left menu to the left and the right one to the right. To get the logo centered in the middle I positioned it absolutely and then set it 50% from the left, minus half the width of the logo. I took off the navbar default to get rid of the gray background that bootstrap automatically puts on it. Also took the collapse off of the navbar-collapse div that the top three ul's were inside of. That way it wouldn't disappear when on mobile. I made the li's inside of the left and right menu be display inline block so they would links would be beside each other. Since the dropdown menu for your hamburger stack is positioned absolutely, I added a right:0 to make it fI'll width. I think that was almost everything.
.navbar-left{
float:left;
}
.navbar-left.nav>li, .navbar-right.nav>li{
display:inline-block;
}
.navbar-right{
float:right;
}
.navbar-center{
position: absolute;
left: calc(50% - 25px);
}
#navbar-burger-menu{
right:0;
}
/* Style for "Signup Rectangle" */
.sign-up:hover, .log-in:hover {
cursor:pointer;
border: 1px solid #ffffff;
text-align:center;
}
/* Style for "SIGN UP" */
.sign-up {
color: #ffffff;
font-family: Raleway;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
/* Style for "LOG IN" */
.log-in {
color: #ffffff;
font-family: Raleway;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
/* Style for "Linkedin, Twitter, Facebook" */
.instagram-logo, .twitter-logo, .facebook-logo{
width: 20px;
height: 21px;
filter: invert(100%);
}
.logo {
width: 128px;
height: 53px;
}
.navbar-container {
padding-top:18px !important;
}
.panorama {
padding-top:140px;
height:100vh;
min-height:400px;
}
.affix {
-webkit-transition:padding 0.2s ease-out;
-moz-transition:padding 0.2s ease-out;
-o-transition:padding 0.2s ease-out;
transition:padding 0.2s ease-out;
}
.affix-top {
background:transparent;
border-color:transparent;
padding: 15px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.icon-bar {
background-color:#fff !important;
}
.affix-top .nav > li > a {
color: #000;
filter: invert(100%);
}
.navbar-nav > li > a {
padding-bottom:35px;
}
.affix-top .navbar-collapse {
border-color:transparent;
box-shadow:initial;
}
/*************MEDIA QUERIES **************/
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<div class="container-fluid">
<div class="navbar navbar-fixed-top" data-spy="affix" data-offset-top="400">
<div class="container">
<div class="navbar-collapse ">
<ul class="nav navbar-nav navbar-container navbar-left">
<li><img class="instagram-logo" src="http://www.fillmurray.com/100/100"></li>
<li><img class="facebook-logo" src="http://www.fillmurray.com/100/100"></li>
<li><img class="twitter-logo" src="http://www.fillmurray.com/100/100"></li>
</ul>
<ul class="nav navbar-nav navbar-header navbar-center">
<li>
<a href="#">
<img class="na-logo" alt="" src="http://www.fillmurray.com/50/50">
</a>
</li>
</ul>
<ul class="nav navbar-right navbar-nav navbar-container">
<li>
<a class="sign-up">SIGN UP</a>
</li>
<li>
<a class="log-in">LOG IN</a>
</li>
</ul>
</div>
<!-- Mobile Burger Menu -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-burger-menu">
<span class="sr-only">Navigation Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul id="navbar-burger-menu" class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- Mobile Burger Menu End -->
<!-- Mobile / Table view End -->
</div>
</div><!-- /.navbar -->
</div><!-- /.container-fluid -->
<section class="panorama" style="background: url(http://www.fillmurray.com/g/200/300) no-repeat; background-size:cover; background-position:center;">
<div class="container">
<h1 class="text-center">Hello.</h1>
</div>
</section><!-- panorama navigation section end -->
</nav><!-- .navbar end -->
I am using bootstrap 4, and I have a navbar for small screens, where I would like a search input group to take the width from left all the way to the right, where I have the menu bar icon. I have made a JSFiddle here. How can I make the input group be flexible and take the remaining space that is on the left side after the menu bar?
I can't seem to get the input inside the input group to take the full width of the form wrapper, I have tried with setting the margin-right same width as the menu-bar but that didn't work since, the input inside the input group didn't take the full width. How can I achieve the desired layout?
This is the navbar:
#media (max-width: 767px) {
.navigation-container .form-wrapper {
width: 100%;
margin-right: 32px;
}
.navigation-container .menu-button {
position: absolute;
}
.navigation-container .navbar {
height: 50px;
}
}
.navigation-container .nav-link {
padding: 0;
}
.navigation-container .navbar {
background: #fff;
flex-direction: inherit;
align-items: center;
padding: 0;
}
.navigation-container .navbar .btn {
font-size: 14px;
}
.navigation-container .navbar .right-side-bar #nav-icon1 {
width: 22px;
top: 10px;
right: 10px;
cursor: pointer;
padding: 0.85rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #008489;
border-radius: 8px;
opacity: 1;
left: 0;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(1) {
top: 0.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(2) {
top: 0.8rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(3) {
top: 1.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(1) {
top: 0.8rem;
background: #008489;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(3) {
top: 0.8rem;
background: #008489;
}
.navigation-container input {
border: 0;
}
.navigation-container i {
color: #008489;
font-size: 28px;
}
.navigation-container .input-group-addon {
background: #fff;
border: 0;
padding: 0;
border-radius: 0;
}
.search-button {
background: transparent;
border: 0;
}
.search-button i {
font-size: 22px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<div class="navigation-container">
<div class="container top-menu">
<nav class="navbar navbar-light bg-faded">
<div class="hidden-md-up nav-small">
<div class="form-wrapper">
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
</div>
<div class="right-side-bar">
<div id="nav-icon1" class="menu-button hidden-md-up">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="navbar-collapse collapse justify-content-between" id="navbar5">
<form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
<div class="input-group big-screen-search-form">
<span class="input-group-addon" id="basic-addon1">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" id="search-input" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
<ul class="navbar-nav my-auto">
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ion-ios-gear-outline"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Admin dashboard</a>
<a class="dropdown-item">
Log out
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
If you don't want to use flex, you can use a width calc and just make room for the hamburger button:
.nav-small { width: calc(100% - 40px); }
The problem is your internal .nav-small is not getting flex properties, so it isn't sizing. If I give it flex grow (1 0 0) and also make it display:flex so its internal pieces position properly, it works.
Here's a fiddle: https://jsfiddle.net/s1vz7xt3/5/ - I simply added
.nav-small {
flex: 1 0 0;
display: flex;
}
I was wondering how I can ensure that section 1 and two's background colour fills the whole of the webpage like in this example. As you can see on my site, the background colour on covers half of the webpage I want the background colour for section one and two to full the whole background of that section.
I have tried using the CSS. However, this doesn't work.
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
SITE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
</style>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
It looks like you are loading jQuery twice. Once in the header (in the Bootstrap links) and once in the footer, for fullpage.js. Since you already loaded it once, you don't need it the second time.
Wrapping all your content in a .container will add a 15px left and right padding to your content, unless you don't place everything in it inside .row (which compensates), as in all the Bootstrap examples.
Make sure your markup is correct and validates. I also added a small CSS:
#sections .section {
padding-top: 10vh;
}
...to compensate for the height of the navbar.
However, please note it is not recommended to have the navbar in scalable units(vh). You should just stick to Bootstrap's defaults (50px). The problem with having a fixed navigation of 10vh is it will eat up too much real estate on mobile devices in portrait mode while not being tall enough for touch events in landscape mode. So, IMHO, you should change both the top padding of the .sections and the navbar height back to ~50px (min 42px). The important part is you should use px instead of vh for navbar height.
Here it is:
$(document).ready(function() {
$('#sections').fullpage();
});
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 10vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
Additional note:
fullpage.js takes care of the fullpage thing for you. However, I happen to believe this is something CSS is capable of doing without any js, using, in principle:
.section {
min-height: 100vh;
}
...and probably flexbox to center align or distribute children nicely.
But, by using fullpage.js, you don't need to do it via CSS.
Working on Vertical Navigation bar found here:
Codeply
My code is the following:
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<style>
html, body {
height: 100%;
}
.wrapper, .row {
height: 100%;
margin-left: 0;
margin-right: 0;
}
.wrapper:before, .wrapper:after,
.column:before, .column:after {
content: "";
display: table;
}
.wrapper:after,
.column:after {
clear: both;
}
#sidebar {
background-color: #eee;
padding-left: 0;
float: left;
min-height: 100%;
}
#sidebar .collapse.in {
display: inline;
}
#sidebar > .nav > li > a {
white-space: nowrap;
overflow: hidden;
}
#main {
padding: 15px;
left: 0;
}
/*
* off canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
#sidebar {
min-width: 44px;
}
#main {
width: 1%;
left: 0;
}
#sidebar .visible-xs {
display: inline !important;
}
.row-offcanvas {
position: relative;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.row-offcanvas-left.active {
left: 45%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -45%;
position: absolute;
top: 0;
width: 45%;
}
}
#media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left.active {
left: 3%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -3%;
position: absolute;
top: 0;
width: 3%;
text-align: center;
min-width: 42px;
}
#main {
left: 0;
}
}
</style>
<script>
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});
</script>
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><i class="fa fa-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="fa fa-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
<li>
<i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span>
<ul class="nav nav-stacked collapse left-submenu" id="item1">
<li>View One</li>
<li>View Two</li>
</ul>
</li>
<li>
<i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span>
<ul class="nav nav-stacked collapse" id="item2">
<li>View One</li>
<li>View Two</li>
<li>View Three</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link</span></li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<p><i class="fa fa-navicon fa-2x"></i></p>
<p>
Main content...
</p>
</div>
<!-- /main -->
</div>
</div>
</body>
</html>
Fiddle
I am not getting the same functionality. My code doesn't show carets for menu dropdowns. Also All menu items have a hyperlink mouseover effect while the original sample does not have it.
Can someone help me to understand what I am doing wrong?
Thanks
you just need to change the version of bootstrap to 3.7.7 which is the stable one
use this links instead
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css