My bootstrap navbar, customized, is collapsing correctly but the menu button during collapse isn't showing up. If I click around the area, I can find a link that lets me drop the dropdown, but I can't see the button. I think maybe my customization is causing it to be invisible or behind the actual navbar. Here is my HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<style>
.navbar-custom {
background-color: #141414;
width: 100%;
float: none;
margin:0;
padding:5px;
font-size: 14px;
letter-spacing: .1em;
text-transform: uppercase;
}
.navbar-nav > li{
margin-left:5px;
margin-right:15px;
}
/* change the brand and text color */
.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: #fff;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #85b0be;
}
.navbar-custom .navbar-logo {
margin-right: 60%;
}
.navbar-custom .navbar-nav li>a:hover{
border-bottom: 3px solid;
bottom: 0;
content: " ";
left: 0;
width: 100%;
}
.text-my-own-color {
color: #85b0be !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #85b0be !important;
border-color: white !important;}
</style>
</head>
<body>
<nav class="navbar navbar-custom navbar-expand-sm justify-content-end">
<a class="navbar-logo" href="#">
<img style="opacity:0.7;filter:alpha(opacity=40); width:50px;" src="{% static 'img/logo.bmp' %}" alt="">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbar" aria-expanded="false">
<i class="fa fa-bolt color-white"></i>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<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="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</body>
Running the code above will generate a navbar that collapses at a certain screen width, but I just can't find where the collapse button is going. Thanks for any help!
Add this CSS:
.navbar-toggler {
background-color: orange !important;
}
You can also check if the CSS works without the !important. If so, you can drop it. Much cleaner CSS.
Related
I am struggling with changing the color of my font in my nav bar button eg. Home to white. In my style.css file I first used .navbar-nav li but then the padding did not work, when I changed it to .navbar-nav ul the padding then worked. I then had to use .navbar-nav li a for the next style syntax to work and all seem to work except for the color syntax. Please advise what I am doing wrong for the color syntax not to work.
The color syntax again does not work in my .fa-bars class conditions but the font size in that class does work.
The last problem I seem to have is that the syntax in my .promo-title class does not work. Any help would be much appreciated. Thanks.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar-nav li a {
color: #fff;
/*Not working letters in nav bar not white*/
font-weight: 600;
float: right;
text-align: left;
}
.fa-bars {
color: #fff;
/*Not working menu bars not white*/
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/50"> </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>
<i class="fa fa-bars" aria-hidden="true"></i> <!--adds menu bars when shrinking screen or in mobile view-->
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<!--ml-auto moves navbar to the right side-->
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
Your selector specificity isn't high enough, so the Bootstrap styles take precedence. A quick look at your browser's document inspector reveals this. Use a more specific selector.
The same is true for the button (but you should remove the default Bootstrap icon).
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar.navbar-light .navbar-nav li a {
color: #fff;
font-weight: 600;
float: right;
text-align: left;
}
body .navbar-light .navbar-toggler {
color: #fff;
border-color: #fff;
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/50"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<!--ml-auto moves navbar to the right side-->
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
You can use
a.nav-link{
color:#fff!important;
}
I'm coding a navbar in Bootstrap. When an anchor link is active or selected, there is a border around it that is black and the resulting text is white. The goal is to make it so that there is no border/background color and the text is orange when it is selected instead of white. If you could provide some recommendations for how the code needs to be changed, that is greatly appreciated.
The image below illustrates what it looks like.
nav {
font-family: 'Poppins', sans-serif;
position: sticky;
border: 0;
}
.nav-link {
margin-top: 0em;
margin-left: 1.5em;
font-size: 1.2em;
}
#media screen and (min-width: 768px) {
.nav-link {
margin-top: 1.0em;
margin-left: 1.5em;
font-size: 1.2em;
}
}
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
color: #FC9639;
}
.navbar-light .nav-item .nav-link:focus {
background-color: white;
}
.icon-bar {
background-color: #000000 !important;
border: 0;
}
.navbar-light {
background-color: white !important;
border: none !important;
border-width: 0!important;
}
.logo {
margin-left: 25px;
width: 80px;
height: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-white navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">WebSiteName</a> -->
<img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo" />
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#process">Process</a>
</li>
</ul>
</div>
</div>
</nav>
I am fairly new to html, css, js and bootstrap 4. I am trying to build a website just to practice my skills. I finally managed to change the colors, text, font-size etc of my bootstrap 4 navbar, however not when I scale down, the hamburger symbol disappears and I lose my options.
The only bit of code I removed was the bg-light to change the color, as well as create a custom class on my to change text color
a link to my code: https://codepen.io/jehc10/pen/LKqRRQ
.navbar-nav {
background:#4287f5;
}
.navbar-brand {
background:#4287f5;
}
.navbar-brand.custom{
color:#FFFFFF;
font-size:25px
/* border-right:2px solid black; */
}
.navbar {
background:#4287f5;
}
body {
font-family: 'Poppins', sans-serif;
/* font-weight:700; */
}
.navbar-nav li a {
color: #FFFFFF;
font-size:20px;
}
Instead of using an image hamburger, create hamburger using HTML and CSS.
.navbar, .navbar-nav {
background: #4287f5;
}
.navbar-brand.custom {
color: #FFFFFF;
font-size: 25px
}
.navbar-toggler {
padding: .25rem .5rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
.navbar-togglebar {
background: #FFFFFF;
display: block;
width: 25px;
height: 2px;
vertical-align: middle;
margin: 5px;
}
.navbar-nav li a {
color: #FFFFFF;
font-size: 20px;
}
<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">
<a class="navbar-brand custom" href="#">Jesse</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-togglebar"></span>
<span class="navbar-togglebar"></span>
<span class="navbar-togglebar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</nav>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You can add the following styling to the navigation burger icon:
/*Initial burger state*/
button.navbar-toggler.navbar-dark.collapsed {
background: #000;
}
/*When toggled*/
.navbar-toggler:not(:disabled):not(.disabled) {
cursor: pointer;
background: #000;
}
I am working on a site I want to use a scrollpy with Bootstrap 4 but it is not working, I guess I have trouble with classes and selectors.
When I hover an element the hover works, but when I scroll it doesnt work.
.navbar {
margin-bottom: 0;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #17a2b8 !important;
background-color: #fff !important;
}
body {
position: relative;
}
HTML
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-info">
Bootstrap 4
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Codeply</a>
</li>
</ul>
</div>
</nav>
</body>
I guess the problem is on the nav-bar li a selectors
Instead of:
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #17a2b8 !important;
background-color: #fff !important;
}
Try this:
.navbar-nav li a:hover, .navbar-nav li a.active {
color: #17a2b8 !important;
background-color: #fff !important;
}
There's this ugly gray color background when I over a link in the navigation bar.
How can I remove this gray background. The links should remain red and when hovered over, it should have been yellow on the overall black background but there's a gray background over that link. Also in the pills. I think the background appears whenever it's over something that is associated with 'nav' word cause other links look fine. Only the navigation bar and the pills cause its css is nav-pills apparently. Attaching images of what happens when I hover over it.
p.s - adding dot instead of.com because I have less than 10 reputation and cannot post more than 2 links.
http://i.imgur.com/rw8qvXP.jpg
http://i.imgur.com/56KoD1z.jpg
#mainNav .container{
padding:0
}
#mainNav .container .navbar-brand{
color:#fed136;font-family:"Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive
}
#mainNav .container .navbar-brand.active,#mainNav .container .navbar-brand:active,#mainNav .container .navbar-brand:focus,#mainNav .container .navbar-brand:hover{
color:#fec503
}
#mainNav .container .btn-toggle{
padding:.75em;font-size:80%
}
#mainNav .container .navbar-nav .nav-item .nav-link{
font-size:90%;padding:.75em 0;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:1px;color:red
}
#mainNav .container .navbar-nav .nav-item .nav-link.active,#mainNav .container .navbar-nav .nav-item .nav-link:hover{
color:#fed136
}
#media (min-width:768px){
#mainNav{
background-color:transparent;padding:25px 0;-webkit-transition:padding .3s;-moz-transition:padding .3s;transition:padding .3s;border:none
}
#mainNav .navbar-brand{
font-size:1.75em;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s
}
#mainNav .navbar-nav .nav-item .nav-link{
padding:1.2em .4em!important
}
#mainNav.navbar-shrink{
background-color:#222;padding:5px 0
}
#mainNav.navbar-shrink .navbar-brand{
padding:.65em 0;font-size:1.25em
}
}
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand page-scroll" href="#page-top">Demo</a>
<button class="btn btn-primary btn-toggle hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i></button>
<!-- Navigation Bar List Contents -->
<div class="clearfix hidden-md-up"></div>
<div class="collapse navbar-toggleable-sm" id="navbarResponsive">
<ul class="nav navbar-nav float-md-right">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#sample">Sample Article</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#topics">Topics</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#whyus">Why Choose Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
<li>
Order now
</li>
</ul>
</div>
</div>
</nav>
It's because of Bootstrap CSS code. There is this code on hover:
.nav > li > a:focus, .nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
Remove the background color and it should do the trick.
In the next working snippet I set it to transparent by strengthening the selector:
.container .nav > li > a:focus,
.container .nav > li > a:hover {
text-decoration: none;
background-color: transparent;
}
#mainNav .container {
padding: 0
}
#mainNav .container .navbar-brand {
color: #fed136;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive
}
#mainNav .container .navbar-brand.active,
#mainNav .container .navbar-brand:active,
#mainNav .container .navbar-brand:focus,
#mainNav .container .navbar-brand:hover {
color: #fec503
}
#mainNav .container .btn-toggle {
padding: .75em;
font-size: 80%
}
#mainNav .container .navbar-nav .nav-item .nav-link {
font-size: 90%;
padding: .75em 0;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
color: red
}
#mainNav .container .navbar-nav .nav-item .nav-link.active,
#mainNav .container .navbar-nav .nav-item .nav-link:hover {
color: #fed136
}
#media (min-width: 768px) {
#mainNav {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
border: none
}
#mainNav .navbar-brand {
font-size: 1.75em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s
}
#mainNav .navbar-nav .nav-item .nav-link {
padding: 1.2em .4em!important
}
#mainNav.navbar-shrink {
background-color: #f00;
padding: 5px 0
}
#mainNav.navbar-shrink .navbar-brand {
padding: .65em 0;
font-size: 1.25em
}
}
<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" />
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand page-scroll" href="#page-top">Demo</a>
<button class="btn btn-primary btn-toggle hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i>
</button>
<!-- Navigation Bar List Contents -->
<div class="clearfix hidden-md-up"></div>
<div class="collapse navbar-toggleable-sm" id="navbarResponsive">
<ul class="nav navbar-nav float-md-right">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#sample">Sample Article</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#topics">Topics</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#whyus">Why Choose Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
<li>
Order now
</li>
</ul>
</div>
</div>
</nav>
The simple way that you can do it is to open the page with firefox or chrome Browser and right click the portion that you want there a pop-up appear choose Inspect Element there a bunch of code appears.
On that left side shows the HTML and the right side part shows the css there you can change and see the difference as a live one.
Important thing is that copy the code form the part that you change and paste it in your code then only it works.