I am using Bootstrap 5 within Rails 7 application. I am following Bootstrap's Dashboard example https://getbootstrap.com/docs/5.0/examples/dashboard/ but within my Rails application the navbar-toggler-icon is not displaying (nor does it work) when I shorten the width of the browser window.
I have a CodePen example https://codepen.io/chrisgo-cp/pen/zYPpEPp that shows the code I am using and navbar-toggler-icon is not displaying.
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<!-- <span data-feather="home"></span> -->
Link ?
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file"></span> -->
Link ?
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<!-- <span data-feather="plus-circle"></span> -->
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 2
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<%= yield %>
</main>
</div> <!--/ .row -->
</div> <!--/ .container-fluid -->
Here you go... Remove position-absolute from the <button>.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<!-- <span data-feather="home"></span> -->
Link ?
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file"></span> -->
Link ?
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<!-- <span data-feather="plus-circle"></span> -->
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 2
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<%= yield %>
</main>
</div>
<!--/ .row -->
</div>
<!--/ .container-fluid -->
</body>
</html>
Related
I am trying to add a Login button to my navbar in bootstrap, but when I add col-x to separate them equally, but they just cover 50% of the width of the navbar and nothing more. But when I use col-x outside then navbar it works perfectly.
The code
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<a class="navbar-brand" href="#">
<h1 class="display-3">Petitions</h1>
</a>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-lg">
Get Started
</button>
</div>
<div class="col-4">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div></div>
</div>
</div>
</nav>
<!-- Navigation -->
I Think you want to make something like this:
<nav class="navbar navbar-dark navbar-expand-md sticky-top" style="background-color: #000000;">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px;">
<div class="col-4">
<a class="navbar-brand" href="#">
<h1 class="display-3">Petitions</h1>
</a>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-lg">
Get Started
</button>
</div>
<div class="col-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div></div>
</div>
</div>
</nav>
in my current project I have a navbar with a burger menu. It scales correctly to md-breakpoint, but after this breakpoint all the elements go to the left and the toggle works weird.
On medium:
view on medium
On laptop L - 1440px:
view on larger than medium
This is the code that I have for my header header right now, but I can't seem to figure out what makes my navbar act so weird, since I'm not specifying anything different between md and >md.
<header>
<div class="container ">
<nav class="navbar bg-light navbar-light fixed-top ">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</div>
</nav>
</div>
Does anyone know what the problem is?
UPDATED
Besides of moving the class .fixed-top to your container, you have to use .container-fluid if you want a full width header. Plus, you have to remove the container wrapping the narvbar-collapse. Otherwise ii'll react to breackpoint aswell.
<header class="container-fluid fixed-top">
<nav class="navbar navbar-light">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</nav>
</header>
#Periplo this is what it looks like after replacing the fixed-top class from the navbar to the parent container.
After added fixed-top to container instead of navbar
Not quite what I'm looking for because I would like a full-width navbar :). Here's my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Products</title>
</head>
<header>
<div class="container fixed-top">
<nav class="navbar bg-light navbar-light ">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<picture>
<img class="img-fluid headerImg mt-5 mb-5" src="images/jungle.jpg">
</picture>
<div class="container">
<div class="row">
<div class="col d-flex mb-3 align-items-center">
<h1 class="m-0 ml-5" style="flex-grow: 1;">Products</h1>
<button class="navbar-toggler" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
</div>
<div class="container">
<div class="row m-0">
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-5">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-5">€25,00</h6>
</article>
</div>
<div class="mx-3 mb-5">
<a href="ourstory.html">
<button type="submit" class="btn btn-primary col-sm-12 col-md-6 d-flex align-items-center justify-content-center mx-auto">Read our story<i class="button fa fa-angle-double-right ml-2"></i></button>
</a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</main>
<footer>
<div class="container">
<ul class="list-unstyled">
<div class="row flex-md-row">
<div class="col-md-6 col-lg-3">
<li><a class="mx-3" href="#">Terms & Conditions</a></li>
<li><a class="mx-3" href="#">Privacy Policy</a></li>
<li><a class="mx-3" href="#">Return Policy</a></li>
</div>
<div class="d-sm-block d-md-none" style="height: 10px; background-color: white; width: 100px; visibility: hidden;"></div>
<div class="col-md-6 col-lg-3">
<li><a class="mx-3" href="contact.html">Contact Us</a></li>
<li><a class="mx-3" href="faq.html">FAQ</a></li>
</div>
</div>
</ul>
<a href="https://www.instagram.com/biancalooijen/">
<div class="icons mx-3 float-right">
<img src="images/instagram.svg" alt="instagramIcon">
</div>
</a>
<a href="https://m.facebook.com/bianca.looijen">
<div class="icons float-right">
<img src="images/facebook.svg" alt="facebookIcon">
</div>
</a>
</div>
</footer>
</html>
This question already has an answer here:
Center Navbar links without brand pushing it to the right in Bootstrap 4?
(1 answer)
Closed 3 years ago.
Im Trying to center my links right under the h1, but nothing works. Here's what i have right now, i would love any help or pointers!
This is my h1-tag
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container justify-content-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
If you are trying to center the .nav-item links horizontally, then add the bootstrap class justify-content-center to the ul tag with class navbar-nav
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container justify-content-center">
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
I am using 'Album' example from Bootstrap 4.1 and unable to get the extra nav-items to display horizontally.
I tried to add 'navbar-expand-lg', and it brings all to horizontal line. But, the toggler-button (and hence its header data) vanishes and becomes inaccessible.
Code as below;
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
Add float: left;CSS to your li items.
Also you can try this
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h
I got the answer.
The navbar was a flexbox with 'd-flex'. So, I added a 'flex-row', which brings nav-items horizontally. 'mr-auto' brings margin properly.
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav flex-row mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
My current theme looks like this: https://gyazo.com/70ebe1ff52847bfbd7220f8e9bbe4854
But when i insert the bootstrap cdn I get: https://gyazo.com/1d97573cc6765ee55f99d99b5094f0cc
I check the css using chrome but I don't understand what changed when I got bootstrap. My navbar got larger and has a black line under the navbar. How can I know what's causing this and how can I remove it? Thank you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
<!--Navbar-->
<nav class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
<div class="bg-white text-center navbar-brand-wrapper">
<a class="navbar-brand brand-logo" href="#"><img src="images/logo_star_black.png"/></a>
<a class="navbar-brand brand-logo-mini" href="#"><img src="images/logo_star_mini.jpg" alt=""></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center">
<button class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3" type="button"
data-toggle="minimize">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline mt-2 mt-md-0 hidden-md-down">
<input class="form-control mr-sm-2 search" type="text" placeholder="Search">
</form>
<ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
<li class="nav-item">
<a class="nav-link profile-pic" href="#"><img class="rounded-circle" src="images/face.jpg"
alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-th"></i></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right hidden-lg-up align-self-center" type="button"
data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--End navbar-->
Add css
.navbar-inverse
{
border: none !Important;
}