I'm making a :hover transition on an a element that is inside an unordered list, ul.
I would like to do the transition on the color at the same time but i don't know how.
ul.centered-navbar > li > a{
text-decoration: none;
background-image: linear-gradient(#55d6aa, #55d6aa);
background-size: 0% 0.1em;
background-position-y: 100%;
background-position-x: 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease-in-out !important;
}
ul.centered-navbar > li > a:hover, ul > li > a:focus, ul > li > a:active {
background-size: 100% 0.1em;
background-position-x: 0%;
}
<ul class="navbar-nav centered-navbar">
<li class="nav-item">
<a class="nav-link" href="./todo.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./todo.html">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./todo.html">Offerte</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./todo.html">Contratti</a>
</li>
</ul>
Related
I can't for the life of me get the background colors or text colors to change on my navbar elements when using navbar-pills via bootstrap.
If I remove the pills element, the colors work correctly. I am getting the default blue pill with white text -- though the bold element is working on hover.
a:hover {
font-weight: 900;
}
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: green;
}
a.active {
color: #df4759;
background-color: #323232;
text-decoration: none;
}
<!-- Nav -->
<nav class="nav-pills navbar navbar-expand-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="">Contact Us</a>
</li>
</ul>
</nav>
Try this.
a:hover {
font-weight: 900;
}
a:link {
color: blue !important;
text-decoration: underline;
}
a:visited {
color: green;
}
a.active {
color: #df4759 !important;
background-color: #323232 !important;
text-decoration: none;
}
You do not have to use !important. While it does get the job done in this case, its use is arguable (read more here). All you really need to do is match the specificity of the bootstrap style declaration. If you simply inspect the element in your browser you will see the selector used is .nav-pills .nav-link.active. So you just need to use that same selector to override and be sure your styles are loaded after bootstrap. If the above set of style rules is just for this nav consider updating all your selectors as below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
nav-pills .nav-link:hover {
font-weight: 900;
}
.nav-pills .nav-link:link {
color: blue;
text-decoration: underline;
}
.nav-pills .nav-link:visited {
color: green;
}
.nav-pills .nav-link.active {
color: #df4759;
background-color: #323232;
text-decoration: none;
}
</style>
<nav class="nav-pills navbar navbar-expand-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="">Contact Us</a>
</li>
</ul>
</nav>
I've seen some posts but, I can't figure it out on my specific lines of code. Can anyone help me add a | between 'About Us' and 'Login' I'm just trying to separate them using a '|'and I'm not exactly sure how to tweak my code to make that happen?
HTML
color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
<div id="logo">
<a href="/index.html">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" style="color:White;" >Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<li class="dropbtn">Services</li>
<div class="dropdown-content">
<a href="/carmaintenance" style="text-align:center">Car Maintenance
______________________
</a>
<a href="/gogreenseminars" style="text-align:center">Go Green Seminars
______________________
</a>
<a href="/microgridresources" style="text-align:center">Microgrid Resources
______________________
</a>
<a href="/gardeningtogether" style="text-align:center">Gardening Together
______________________
</a>
<a href="/volunteering" style="text-align:center">Volunteering and Activism
______________________
</a>
<a href="/recyclingefforts" style="text-align:center">Recycling Efforts
______________________
</a>
<a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe
</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
</ul>
</div>
</nav>
CSS
/* Position the navbar container inside the image */
/*.container {
position: absolute;
margin: 20px;
width: auto;
top:3%;
left:1%;
}
*/
/* The navbar */
.topnav {
overflow: hidden;
background-color: rgba(152,226,80,0.6);
}
/* Navbar links */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.nav-link
{
/*background-color:;*/
font-weight: bolder;
color: white;
font-size: 125%;
align-items:center;
text-align:center;
float: left;
display: block;
margin-left: 65px;
margin-right:5px;
}
.navbar {
float: left;
width:66%;
height:8%;
opacity:1;
border-radius:15px 0px 0px 15px;
padding-left: 0%;
top:3%;
left:1%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown Button */
.dropbtn {
background-color: rgba(152,226,80,0.0);
color: white;
padding: 8px;
font-size: 125%;
border: none;
font-weight:bolder;
margin-left:65px;
margin-right:5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 90px;
box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
z-index: 1;
text-align:center;
padding-left:20px;
padding-top:13px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color : rgba(152,226,80,0.6);
font-weight:bolder;
margin-top: -10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}
#font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight:bolder;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}
Any help would be nice and thank you in advance!
You can do this with either a border-left on the last li using :last-child a pseudo-element or a placed content using the :before pseduo-element. Note that by adding pseudo-elements - they are added as the first-child of the selected element. That may play a role in other styling issues.
EDIT - following my comment above - the only valid child of a ul is an li so you should amend your HTMLstructure to ensure that any divs / dropdowns etc are children of an li - not of the parent ul.
Thank you to #dale landry for the code skeleton used below :)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by using a :before pseudo element
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by simply adding aen element that is the same height as the entire li as a divider:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
And if you don't want to rely on the :last-child pseudo-selector - you can achieve the same by adding a class to the last item
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
And if you want the divider between every li - but not to the right of the last one then you can use the direct sibling combinator "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
or by using a :before pseudo element
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
Why dont you add span in your li element of About us like following:
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
</li>
Simply wrap a bar in a list item tag in line with your nav at the spot you wish to have one. See my snipit. Now it is semantically valid code
.flex-box {
display: flex;
}
li,
.nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 4px;
color: black;
}
.bar {
font-weight: bold;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<li class="dropbtn">Services</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="bar">|</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
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;
}
#import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
#media (min-width: 768px) {
.bootstrap-vertical-nav .collapse {
display: block;
}
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 220px;
}
.sidebar-nav li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
/* this background color doesn't trigger */
.sidebar-nav li:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: 0;
}
.sidebar-nav li:first-child a {
background-color: #1a1a1a;
color: 555;
}
.sidebar-nav li:nth-child(2):before {
background-color: #d12525;
}
.sidebar-nav li:nth-child(3):before {
background-color: #4c366d;
}
.sidebar-nav li:nth-child(4):before {
background-color: #583e7e;
}
.sidebar-nav li:nth-child(5):before {
background-color: #64468f;
}
.sidebar-nav li:nth-child(6):before {
background-color: #704fa0;
}
.sidebar-nav li:nth-child(7):before {
background-color: #7c5aae;
}
.sidebar-nav li:nth-child(8):before {
background-color: #8a6cb6;
}
.sidebar-nav li:nth-child(9):before {
background-color: #987dbf;
}
.sidebar-nav li:hover:before {
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav li a {
background-color: #1a1a1a;
color: #fff;
display: block;
padding: 10px 15px 10px 30px;
text-decoration: none;
z-index: -2;
}
.sidebar-nav li.open:hover before {
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav .dropdown-menu {
background-color: #222222;
border-radius: 0;
border: none;
box-shadow: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
background-color: transparent;
color: #fff;
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 20px;
height: 65px;
line-height: 44px;
}
<div class="collapse" id="collapseExample">
<ul class="nav flex-column sidebar-nav" id="exCollapsingNavbar3">
<li class="nav-item sidebar-brand">
<a nav-link href="#">
Bootstrap 4
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-item" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-bank"></i> Page 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
Issue 1) I'm working on a HTML + CSS sidenav, I'm having some trouble with the Z-Index, if you hover over an item in the side nav, there will be a color transition from left to right. I want the text to stay on top.
Issue 2) My drop down list won't work at all, I thought i followed the bootstrap tutorial on it.
This entire project is an angular2 project. if you can use ng-bootstrap for any of the functionality, great! if not, i appreciate any feedback on how to resolve either issue.
UPDATED: Solution, you'll need ng-bootstrap to have it working. Wasn't sure how to add the library to the snippet tool.
#import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
#media (min-width: 768px) {
.bootstrap-vertical-nav .collapse {
display: block;
}
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 220px;
}
.sidebar-nav li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
.sidebar-nav div {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
/* this background color doesn't trigger */
.sidebar-nav li:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: -2;
}
.sidebar-nav div:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: -2;
}
.sidebar-nav li:first-child a {
background-color: #1a1a1a;
color: 555;
}
.sidebar-nav li:nth-child(n):before {
z-index: 1;
background-color: #b7e7ff;
}
.sidebar-nav li:nth-child(1):before {
background-color: transparent;
}
/*
BLUE: 0085c6 and darker is: 0c78ad
YELLOW: f3c300
BLACK: 000
GREEN: 009f3d
RED: e00024
*/
.sidebar-nav li:nth-child(n) div:before {
background-color: #0085c6;
z-index: 1;
}
.sidebar-nav li:hover:before {
transition: width 0.2s ease-in;
width: 100%;
z-index: -1;
}
.sidebar-nav li a {
background-color: #1a1a1a;
color: #fff;
display: block;
padding: 10px 15px 10px 30px;
text-decoration: none;
}
.sidebar-nav li.open:hover before {
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav .dropdown-menu {
background-color: #1a1a1a;
border-radius: 0;
border: none;
box-shadow: none;
margin: 0;
padding: 0 0 0 15%;
position: relative;
width: 100%;
}
.sidebar-nav .dropdown-menu li:nth-child(1):before {
background-color: #b7e7ff;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
background-color: transparent;
color: #fff;
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
font-size: 20px;
height: 65px;
line-height: 44px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3">
<!--<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-block">
You can collapse this card by clicking Toggle
</div>
</div>
</div>-->
<div id="collapseExample" [ngbCollapse]="isCollapsed" class="bootstrap-vertical-nav">
<div class="collapse" id="collapseExample">
<ul class="nav flex-column sidebar-nav" id="exCollapsingNavbar3">
<li class="nav-item sidebar-brand">
<a nav-link href="#">
Bootstrap 4
</a>
</li>
<li class="nav-item">
<div>
<a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link" href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link" href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link" href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</div>
</li>
<li class="nav-item dropdown">
<div ngbDropdown>
<a class="nav-item" href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<hr />
<div>
<h1>Right Pane - Bootstrap 4.0 Vertical Nav Example</h1>
</div>
</div>
</div>
</div>
The problem is you cannot use that li:before for both showing the left colored bar and also for the color transition, and still have the text on top.
What I suggest is adding a span element inside you list item, and that span should represent the colored bar that should always be present:
<li class="nav-item">
<span class="before-bar"></span>
<a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
.before-bar {
position: absolute;
height: 100%;
width: 3px;
}
.sidebar-nav li:nth-child(2):before,
.sidebar-nav li:nth-child(2) .before-bar {
background-color: #d12525;
}
See http://plnkr.co/edit/AHaTOQmBwllZV5bATFtJ?p=preview (only modified for the "Home" link)
Probably an even better solution would be to keep the li:before for the 3px color bar, and have the span for the color transition (with a lower z-index).
To keep the text on top, change the z-index for li:before
.sidebar-nav li:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: -1;
}
Issue 1) I'm working on a HTML + CSS sidenav, I'm having some trouble with the Z-Index, if you hover over an item in the side nav, there will be a color transition from left to right. I want the text to stay on top.
.sidebar-nav li a{
position:relative;
z-index:0;
}
Issue 2) My drop down list won't work at all, I thought i followed the bootstrap tutorial on it.
This entire project is an angular2 project. if you can use ng-bootstrap for any of the functionality, great! if not, i appreciate any feedback on how to resolve either issue.
Try to add bootstrape.min.js
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.