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;
}
Related
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>
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.
I'm building a menu using bootstrap 4m but I ran into an issue I can't figure out.
header > nav {
background-color: #fff;
}
.navbar {
padding-top: 1.6rem;
padding-bottom: 1.6rem;
}
.navbar-nav > li > a {
font-size: 1.4rem;
color: #504843;
text-transform: uppercase;
letter-spacing: .1rem;
font-weight: 700;
margin-right: 2rem;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background: none;
font-size: 1.4rem;
color: #262423;
border-bottom: .3rem solid #ff5f06;
letter-spacing: .1rem;
}
.navbar-nav > li:last-child {
margin-right: -2rem;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/images/logo.png" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
I added an orange line (border-bottom) on hover. When I hover over a menu item, the entire menu jumps up a little bit.
How can I avoid this jumping?
Thanks
You can see working example here:
jsfiddle.net/n5f2b4qk/
You have "Jumps" because of the border-bottom: .3rem solid #ff5f06;
There are 2 approaches to avoid it.
set border in :after element (as in example)
.navbar-nav > li > a {
font-size: 1.4rem;
color: #504843;
text-transform: uppercase;
letter-spacing: .1rem;
font-weight: 700;
margin-right: 2rem;
position: relative;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background: none;
font-size: 1.4rem;
color: #262423;
letter-spacing: .1rem;
}
.navbar-nav > li > a:hover:after,
.navbar-nav > li > a:focus:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
height: .3rem;
background: #ff5f06;
}
Other option is to set transparent border for a element and change color with hover.
I am trying to change link color on nav-bar but after the changing it seems the same. What is wrong? Why its not working? Here is the code:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand" href="#page-top">
<span class="d-block d-lg-none">Start Bootstrap</span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">
</span>
</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">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#interests">Interests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#awards">Awards</a>
</li>
</ul>
</div>
</nav>
CSS
.bg-primary {
background-color: #BD5D38 !important;
}
,
.nav-link {
color: #222222 !important;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #ffffff;
}
#sideNav .navbar-nav .nav-item .nav-link {
font-weight: 600;
text-transform: uppercase;
}
#media (min-width: 992px) {
#sideNav {
text-align: center;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: 17rem;
height: 100vh;
}
#sideNav .navbar-brand {
display: flex;
margin: auto auto 0;
padding: 0.5rem;
}
#sideNav .navbar-brand .img-profile {
max-width: 10rem;
max-height: 10rem;
border: 0.5rem solid rgba(255, 255, 255, 0.2);
}
#sideNav .navbar-collapse {
display: flex;
align-items: flex-start;
flex-grow: 0;
width: 100%;
margin-bottom: auto;
}
#sideNav .navbar-collapse .navbar-nav {
flex-direction: column;
width: 100%;
}
#sideNav .navbar-collapse .navbar-nav .nav-item {
display: block;
}
#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
display: block;
}
}
I changed it on the .nav-link class but it's not working. While nav-link lass is inside tag. I don't want to use tags for defining hover and link colors because on my site other links will have other colors while only nav-links must have this color. That is why I am trying to use nav-link class for it. How can I make it worked?
Thanks in advance!
I think you have an unneeded comma after closing .bg-primary in your css. Right now it looks like:
.bg-primary {
background-color: #BD5D38 !important; },
Remove the comma at the end so it should be:
.bg-primary {
background-color: #BD5D38 !important; }
I think the comma is messing with the following lines of code. And the important in your color css is preventing the hover, focus and active states to work.
Here is how the top part of your css should look:
.bg-primary {
background-color: #BD5D38 !important; }
.nav-link {
color: #222222;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {color:#ffffff}
Also if you are linking to the new beta version of bootstrap 4 you need to be more specific and add the .navbar-dark .navbar-nav so it would look like:
.bg-primary {
background-color: #BD5D38 !important;
}
.navbar-dark .navbar-nav .nav-link {
color: #222222;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:active {
color:#ffffff
}
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.