In mobile view as i click on hamburger button the dropdown menu gets overlapped with the content.Even while scrolling down the content is being overlapped.
<div class="background my-0 mx-0 fixed-top">
<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="#">TAVISH DESIGN STUDIO</a>
<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">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">HOMEPAGE</a>
</li>`enter code here`
<li class="nav-item">
<a class="nav-link" href="#">OUR CLIENTS</a>
</li>`enter code here`
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CAREERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>
Add background solid color to navbar list like below:
.navbar-collapse.show {
background: white;
}
Related
Tried to move the nav-item "Sign Up" to right by ml-auto and justify-content-end using Bootstrap 4 yet it isn't moving.
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Removing mr-auto form the Sign Up navbar seems to do it.
Just remove "mr-auto" class from ul tag, and add below css.
.navbar-nav.rightSide {
display: flex;
justify-content: flex-end;
flex-grow: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav rightSide">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
This question already has answers here:
Bootstrap change navbar color
(8 answers)
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 3 years ago.
I've tried to use one of the recommended bootstrap 4 navbar styles. I pasted the code inside my project and all worked well. The only problem is that I've changed the background color from dark to white. Because of that text inside the navbar went invisible. I was trying many ways on how to change the text color to black so you can see the text but it didn't work and I can't figure out how do I change the color of the text from white to black.
I've tried adding the text-black class inside one of the navbar classes which didn't work as well.
Thanks for any help.
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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="#">About</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>
</div>
</nav>
</section>
The navbar-dark class on your <nav> element is the one setting the text color.
Change the navbar-dark to navbar-light when using light background colors.
Documentation: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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="#">About</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>
</div>
</nav>
</section>
Just add some css to #navigation * and set the color using color.
#navigation * {
color: red;
}
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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="#">About</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>
</div>
</nav>
</section>
Hope this helps
I'm trying to created a fixed-top navbar using Bootstrap 4 however I'm having a very difficult time trying to align the LOGO and MENU items to my liking.
I understand there is ml-auto, mr-auto however, is it possible for me to add pixels to it so I move it exactly how I want to?
This is what my navbar looks like:
I am hoping to move the LOGO and the MENU items towards the middle of the screen. maybe start with padding of 100px from right and left, so LOGO and MENU are closer together. Here is my code:
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</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>
You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar {
padding: 0.5em 100px !important;
}
#media only screen and (max-width: 768px) {
.navbar {
padding: 0.5em 1em !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</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>
I have a simple main header which contain a navbar , I want an image background to the main header.
Here is jsfidle:http://jsfiddle.net/Mwanitete/fgkq759n/8/
Here is html:
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
here is css
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://thumb.ibb.co/eodzqU/Path_47.png" alt="Path_47");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
}
Here is what I have :
my solution displays navbar on top and the image is below the navbar?
Here is what I want:
what am I missing in my code???
Try
.navbar-custom {
background-color: rgba(0,0,0,0);
}
And add the navbar-custom class to your opening tag, like this
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom">
Hopefully this will work.
You can try with this code i hope it's will work!
<div class="marketing-main-header_banner">
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Item</a>
<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">
<ul class="nav navbar-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="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
</ul>
</div>
</nav>
I want use bootstrap navbar but I don't know how to align the items of the unordered list to right. Can you help me?