Navigation bar hover color is not changing - CPanel

brocklee12
April 19, 2018
136 views
0 votes
2 Answers

<div class="navbar-header"></div>
<div class="navbar-header"></div>
<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li><a class="smoth-scroll" href="#home">Home</a></li>
        <li><a class="smoth-scroll" href="#aboutus">About Us</a></li>
        <li><a class="smoth-scroll" href="#services">Services</a></li>
        <li><a class="smoth-scroll" href="#ourteam">Our Team</a></li>
        <li><a class="smoth-scroll" href="#testimonial">Testimonials</a></li>
        <li><a class="smoth-scroll" href="#portfolio">Portfolio</a></li>
        <li><a class="smoth-scroll" href="#contactus">Contact Us</a></li>
    </ul>
</div>
<!-- /.navbar-collapse --></nav>

================================================
7. Navigation
================================================
*/
.menu-bg {
    z-index: 999;
}
.menu-bg .basement-logo {
    padding-top: 5px;
    transition: all 0.3s ease 0s;
}
.navbar-default {
    background-color: inherit;
    border-color: inherit;
}
.navbar {
    border-radius: 0;
    min-height: auto;
    margin: 0;
    border: none;
    z-index: 9;
}
.navbar-collapse {
    float: right;
    margin: 0;
    padding: 0;
}
.navbar-brand {
    padding: 0;
    height: auto;
}
.navbar-nav > li {
    padding: 0;
    margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
    color: #000;
    font-size: 13px;
    font-weight: 600;
    padding: 30px 13px;
    transition: all 0.3s ease 0s;
    text-transform: uppercase;
    background-color: inherit;
    font-family: "Roboto",sans-serif;
    letter-spacing: 1px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    background-color: #DC143C !important;
    color: #000;
}
.menu-bg .navbar-default .navbar-nav li a {
    padding: 20px 10px;
    transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #DC143C !important;
    color: #000;
}
/*

I copy and pasted this from CSS code editor in file manager through my Cpanel account. I am trying to change the hover color to a red (#DC143C), but am failing miserably. I really appreciate your help so thanks in advance! I think it’s obvious I am a novice and I am still trying to figure out the relationship between CSS, JavaScript, and HTML, so please have some patience. I’ve finally figured out basic networking, but this is a whole new ball game. Again, thanks so much for your help.

Answers

You had forgot to add ul before li in css. use below code it works.

<html>
<head>
<style>
.menu-bg {
	z-index: 999;
}
.menu-bg .basement-logo {
	padding-top: 5px;
	transition: all 0.3s ease 0s;
}
.navbar-default {
	background-color: inherit;
	border-color: inherit;
}
.navbar {
	border-radius: 0;
	min-height: auto;
	margin: 0;
	border: none;
	z-index: 9;
}
.navbar-collapse {
	float: right;
	margin: 0;
	padding: 0;
}
.navbar-brand {
	padding: 0;
	height: auto;
}
.navbar-nav > li {
	padding: 0;
	margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
	color: #000;
	font-size: 13px;
	font-weight: 600;
	padding: 30px 13px;
	transition: all 0.3s ease 0s;
	text-transform: uppercase;
	background-color: inherit;
	font-family: "Roboto",sans-serif;
	letter-spacing: 1px;
}
.navbar-default .navbar-nav > ul > li > a:focus, .navbar-default .navbar-nav > ul > li > a:hover {
	background-color: #DC143C !important;
	color: #000;
}
.menu-bg .navbar-default .navbar-nav ul li a {
	padding: 20px 10px;
	transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	background-color: #DC143C !important;
	color: #000;
}

</style>
</head>
<body>
    <div class="navbar-default">
	     <div class="navbar-nav" >
		        <ul>
				  <li style="height:50px;">  
                       <a href="#">dfsdgdsgs </li> </a>
				  
		 </div>
	</div> 
</body>
</html>

Just simply insert the below css code to your CSS file. And I’ve provided the Codepen Link For you Check that
https://codepen.io/anon/pen/dePmEY

.navbar-collapse ul li a:hover{
  color:black;
  background-color:#DC143C;
}

For further queries please provide your HTML code.

.menu-bg {
	z-index: 999;
}
.menu-bg .basement-logo {
	padding-top: 5px;
	transition: all 0.3s ease 0s;
}
.navbar-default {
	background-color: inherit;
	border-color: inherit;
}
.navbar {
	border-radius: 0;
	min-height: auto;
	margin: 0;
	border: none;
	z-index: 9;
}
.navbar-collapse {
	float: right;
	margin: 0;
	padding: 0;
}
.navbar-brand {
	padding: 0;
	height: auto;
}
.navbar-nav > li {
	padding: 0;
	margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
	color: #000;
	font-size: 13px;
	font-weight: 600;
	padding: 30px 13px;
	transition: all 0.3s ease 0s;
	text-transform: uppercase;
	background-color: inherit;
	font-family: "Roboto",sans-serif;
	letter-spacing: 1px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	background-color: #DC143C !important;
	color: #000;
}
.menu-bg .navbar-default .navbar-nav li a {
	padding: 20px 10px;
	transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	background-color: #DC143C !important;
	color: #000;
}
.navbar-collapse ul li a:hover{
  color:black;
  background-color:#DC143C;
}

<div class="navbar-header"></div>

<div class="navbar-header"></div>
<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
	<li><a class="smoth-scroll" href="#home">Home</a></li>
	<li><a class="smoth-scroll" href="#aboutus">About Us</a></li>
	<li><a class="smoth-scroll" href="#services">Services</a></li>
	<li><a class="smoth-scroll" href="#ourteam">Our Team</a></li>
	<li><a class="smoth-scroll" href="#testimonial">Testimonials</a></li>
	<li><a class="smoth-scroll" href="#portfolio">Portfolio</a></li>
	<li><a class="smoth-scroll" href="#contactus">Contact Us</a></li>
</ul>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Navigation bar hover color is not changing – CPanel

Answers