Having trouble with my navbar. On the non-mobile version (or when browser is expanded), I would like the hover on links to have a background color filled in height of the navbar instead it is only coloring partially.
Please let me know how I can have full bg color on the hovering of each link. Thank you!
a,
a:visited,
a:hover,
a:active {
color: inherit;
}
/* Navigation Bar */
.navbar {
background-color: #303030;
}
.navbar-nav a {
color: #ffffff;
text-align: center;
}
.navbar .navbar-nav>a:hover,
.navbar .navbar-nav>a:focus {
color: #ffffff;
background-color: yellow;
}
/*Mobile menu icon color*/
.navbar .navbar-toggler {
border-color: rgb(255, 255, 255);
}
.navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* Branding Dimension for Mobile */
.navbar-brand img {
width: 125px;
height: 29px;
}
#media (min-width: 576px) {
.navbar-brand img {
width: 195px;
height: 45px;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets\css\style.css">
<title>Street Scents</title>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="assets/img/logo-text.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Merch</a>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Just add the py-0 Bootstrap class to the Navbar to remove the top/bottom padding so that your custom hover color fills the height. To maintain the original height, add top/bottom padding to the nav-links.
https://www.codeply.com/go/4ZBnt0gWFc
<nav class="navbar navbar-expand-lg py-0">
<a class="navbar-brand" href="#">
<img src="assets/img/logo-text.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Merch</a>
</div>
</div>
</nav>
CSS to change link or hover color:
/* change the link color */
.navbar-nav .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
color: #ffffff;
}
Related
So I am new to bootstrap 4 and sass and i want to do a project with both of them for the first time. The problem comes when I am trying to construct a div that is 900px in height but somehow, for some reason, it does not show up. It only shows up when I actually put things in it. What am I doing wrong here?
Could it be a problem because i am using sass? Or is it something completely else?
Code:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.I {
width: 100%;
height: 2000px;
}
.II {
height: auto;
width: 100%;
background-image: url(https://66.media.tumblr.com/94fb0667afbd3be221b09eb507991a22/tumblr_pwp1fg971T1qjb5z3o2_1280.png);
background-size: cover;
color: white;
}
.II .nav-link {
color: white;
}
.II a {
text-decoration: none;
color: white;
font-weight: bold;
}
.II a:hover {
color: #cacaca;
}
.IV {
background-color: #6362a7;
width: 100%;
height: 900px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 50px;
}
.fa-suitcase {
color: #f5b944;
}
.col-md-2 {
margin-right: 0px;
width: 15%;
}
/*# sourceMappingURL=webwavers.css.map */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="I container-fluid">
<div class="row">
<div class="II container-fluid">
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="#">COSMOS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<!-- <div class="III container"> -->
</div>
<div class="row">
<div class="IV container-fluid">
<!--im small and i should be 900 px in height-->
</div>
</div>
</div>
A simple .container-fluid > .row > .col-12 will do. Giving .col-12 (or any of its children) a height of 900px will make it apply. Working example:
.min-900 {
border: 3px solid red;
height: 900px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">COSMOS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="row">
<div class="col-12 min-900"></div>
</div>
</main>
If you want to use min-height instead of height, your selector has to have a specificity of more than 1 class, because .col-* classes have a min-height of 1px, which you need to override. Example:
div.min-900 {
border: 3px solid red;
min-height: 900px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">COSMOS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="row">
<div class="col-12 min-900"></div>
</div>
</main>
As said in the comments, do not put content directly into row. You actually need to put it into col-*-* so what you need is to change that to .row > col-*-* > (content). What I am using is simple notation. <div class="warning><p class="bold">content</p></p> corresponds to warning > bold > (content). I think you'll understand what I am telling you by now.
Hope this helps!
I have a section in my header named #contact-stripe that has a space/gap between it and the navbar. However, I don't see anywhere that has padding or margin so I'm stumped.
I put this on CodePen which may make it easier to see.
I've used Chrome's inspect to try and find anything that is using margin/padding and just can't find it.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Listing Naples</title>
</head>
<body>
<header>
<!-- Contact Stripe -->
<section id="contact-stripe">
<div class="container">
<span class="float-left"><i class="fas fa-envelope"></i> Email Us</span>
<span class="float-right">
<div class="telephone align-middle">
<i class="fas fa-phone d-sm-inline-block align-middle"></i>
<span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
</div>
</span>
<ul class="social">
<li class="align-middle"><i class="fab fa-facebook-square"></i></li>
<li class="align-middle"><i class="fab fa-twitter-square"></i></li>
<li class="align-middle"><i class="fab fa-instagram"></i></li>
<li class="align-middle"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<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="#">Buying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 ml-4 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
padding:0;
}
#contact-stripe {
background-color: #000;
border-bottom: 1px solid #353a3b;
color: rgba(255, 255, 255, 0.5);
}
ul.social{
text-align:center;
list-style-type:none;
}
ul.social li {
display:inline-block;
border-right:1px solid #353a3b;
}
ul.social li:first-of-type {
border-left: 1px solid #353a3b;
}
.telephone {
background-color:red;
}
.telephone-number {
background: teal;
}
.navbar-custom {
background-color:#000;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', sans-serif;
}
h1 {
font-size: 1.8rem;
font-weight: bold;
}
Because your ul.social has a margin-bottom of 1rem.
just add this css to fix:
ul.social {
margin-bottom: 0;
}
The hover is not covering all the height of the link, How I do to fix the hover?
I know that the combination of colors is not correct but is only for testing*
I'm using Bootstrap 4.3.1
.navbar .collapse ul li{
}
.navbar .collapse ul li a{
font-family: 'Comfortaa', cursive;
font-size: 20px;
color: skyblue !important;
}
.navbar .collapse ul li a:hover{
background-color: deepskyblue;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand mx-5" href="#">
<img src="Resources/Images/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-3">
<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="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Your first div's .navbar class is adding padding. That's why the hover is not displaying like you want.
FIX: Remove padding (top & bottom) by adding this CSS
.navbar {
padding: 0 1rem;
}
Navbar items remain visible for some time after closing the collapsed navbar as you can see in the second picture.
Html code:
<nav class="navbar navbar-dark fixed-top" style="background-color: transparent;>
<a class="navbar-brand" href="#">Muhammad Yasir</a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="my-1 mx-2 close">X</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
CSS code:
.navbar-toggler>.close {
display:inline;
color: white;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
display:none;
}
Here is when I collapse the navbar
And here is how collapsed item shows for some time even after closing the navbar
For displaying collapsed navbar on the whole page and to change color on collapsing I have used some javascript along with css.
Javascript code:
$(".navbar-toggler").click(function(){
$("nav").toggleClass("navbar-blue");
})
Css code:
.navbar-collapse {
height: 100vh;
}
.navbar{
color: white;
}
.navbar-blue{
background-color: #23415C !important;
}
I don't know where is the problem in my code. I guess maybe its due to increased size of collapsing navbar.
Change the JS to
$(".navbar-toggler").on('click', function(e){
$("nav").toggleClass("navbar-blue");
setTimeout(() => {
$($(e.target).closest('.navbar-toggler').data('target')).toggleClass('opened')
}, 350);
})
... and add this to your CSS:
.collapsing.opened {
transition-duration: 0s;
}
See it working:
$(".navbar-toggler").on('click', function(e){
$("nav").toggleClass("navbar-blue");
setTimeout(() => {
$($(e.target).closest('.navbar-toggler').data('target')).toggleClass('opened')
}, 350);
})
.navbar-toggler>.close {
color: white;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
display:none;
}
.navbar{
color: white;
}
.navbar-blue{
background-color: #23415C !important;
}
.collapsing.opened {
transition-duration: 0s;
}
.navbar-collapse > .navbar-nav {
height: calc(100vh - 58px);
}
.navbar-toggler>.close {
width: 30px;
height: 30px;
}
body {
background-color: #212121 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-dark fixed-top" style="background-color: transparent;">
<a class="navbar-brand" href="#">Muhammad Yasir</a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="close">X</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Additionally,
.navbar-collapse > .navbar-nav {
height: calc(100vh - 58px);
}
... fixes the opening animation of your collapse (removes the jump), and
.navbar-toggler>.close {
width: 30px;
height: 30px;
}
... combined with removing mx-1 my-2 classes from it will stop your title from slightly changing position when closing/opening the .navbar-collapse.
Here's how the above works:
.navbar-collapses animation is performed by swiftly adding .collapsing class to it (which gives it a transition-duration of .35s). Setting the duration to 0s fixes the problem, but also disables the opening animation, as Bootstrap uses the same class for both opening and closing animations.
Had they used a different class for opening (say: .expanding),
.collapsing {
transition-duration: 0s
}
... would have been sufficient.
That's why the solution is to toggle a custom class on the target element (.opened) 350ms after the toggler is pressed and only override the transition-duration value when both classes are present.
In theory, this method has the potential to break when one clicks very rapidly (more than once every 350ms) on the toggler button but, since it's an edge case and it involves complicating the solution considerably, I chose not to deal with it.
In my navbar I have both image and text (The navbar brand) inside the <a class="navbar-brand> tag. When I added the image, it wasn't vertically centered within the navbar, so I had to give the <img> tag margin-top to align it, but it also pushed the navbar brand down, how can I move the text back up?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar {
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 40px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg fixed-top" style="background: gray!important;">
<div class="container">
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo" style="margin-top:10px;margin-right:5px">
Brand Name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
<span class="navbar-toggler-icon" style="back-ground-color:white!important;"></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">
<a class="nav-link" href="#" style="color:white">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
I have removed all of the extra classes from the img tag and moved the text inside a span. I used flexbox to center align text and logo.
.navbar-brand {
padding: 0 15px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="https://loremflickr.com/30/30" width="30" height="30" alt="logo">
<span>Brand Name</span>
</a>
Working Example
https://jsfiddle.net/yj1qjgvp/
Just removed line height in navbar-brand, its conflicting with your image dimesions.
Hope this helps!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar {
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 40px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg fixed-top" style="background: gray!important;">
<div class="container">
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo" style="margin-top:10px;margin-right:5px">
Brand Name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
<span class="navbar-toggler-icon" style="back-ground-color:white!important;"></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">
<a class="nav-link" href="#" style="color:white">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>