I want to style the "active" link .login but it do not work. Where is the problem?
.active {
color: rgb(0, 148, 199);
}
<div id="nav">
<span id="logo"></span>
<span id="navTop">
<ul>
<li>.welcome</li>
<li>.register</li>
<li><a class="active" href="#">.login</a></li>
<li>.contact</li>
</ul>
</span>
<span id="navBottom">
<ul>
<li>.overview</li>
<li>.feature</li>
<li>.videos</li>
</ul>
</span>
</div>
This code seems to work fine. I would suggest you have some other css rule that is overriding this.
You can test this by adding !important to the css rule and see if it solves the problem. Then you need to track down what style is overriding it.
e.g.
.active {
color: rgb(0, 148, 199)!important;
}
.active {
color: rgb(0, 148, 199);
}
<div id="nav">
<span id="logo"></span>
<span id="navTop">
<ul>
<li>.welcome</li>
<li>.register</li>
<li><a class="active" href="#">.login</a></li>
<li>.contact</li>
</ul>
</span>
<span id="navBottom">
<ul>
<li>.overview</li>
<li>.feature</li>
<li>.videos</li>
</ul>
</span>
</div>
Related
I am relatively new to Sass so apologies if the answer to this question is straightforward. I am building a navbar component and would like to style the entire navbar (.main-header) when hovering over specific icons (.navbar-links and .navbar-title). So far, I have tried setting the .main-header element to a variable ($h: &) as well as using #at-root to no avail. Any and all suggestions would be much appreciated.
Example of the behavior I am looking for:
.navbar-links:hover
results in
.main-header{
background: red;
}
code:
<nav className='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li className='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
You can use pointer-events: none; at the header and set the children to pointer-events: auto; so you can manage it with hover like this:
.main-header {
pointer-events: none;
}
.main-header:hover {
background-color: red;
}
.navbar-item {
pointer-events: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav class='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li class='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
I have created a focus state which will create an outline to distinguish the focused item , however I want to exclude the outline style when I am focused on the hamburger toggle button. I have tried using :not selector as " :focus:not(.hamburger) " but its doing nothing .
-------HTML BLOCK FOR NAVIGATION LIST-----------
<header>
<div class="logo">
<img src="img/pf1.jpg" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">My Services</li>
<li class="nav__item">About me</li>
<li class="nav__item">My Work</li>
</ul>
</nav>
</header>
--------CSS FOR FOCUS STATE--------
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
The :not() pseudo selector needs to appear earlier in the selector, since it qualifies elements, not pseudo states like :focus. So:
*:not(.hamburger):focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
I want to change the background of "zxczxczxc" and "bbbbbb" to yellow. I try ul > li:first-child > a {
background: yellow;
} but it is not work. Any one have solution? thanks
Note: No add more class. It's must be css only.
<ul class="sub-menu">
<li>
<a>zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a>bbbbbb</a>
</li>
</ul>
Your Answer:
.link1{background-color:red}
.link2{background-color:Blue;
color:white;}
<li>
<a class="link1">zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a class="link2">bbbbbb</a>
</li>
</ul>
Buddy, you have a small typo in your code to set a background color we use background-color
body {
background-color: coral;
}
I have navigation created using nav tabs.
I wan't to set color on hover, but I can't
I tried this, but not working .
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
HTML
<div class="col-md-10">
<nav class="row">
<ul class="nav nav-tabs">
<li class="tab1"> <span class="glyphicon glyphicon-user"></span> Name    <span class="glyphicon glyphicon-chevron-down"></span> </li>
<li class="tab1"><span class="glyphicon glyphicon-flag"></span>Text Link </li>
<li class="tab1"> <span class="glyphicon glyphicon-envelope"></span> Message </li>
<li class="tab1"> <span class="glyphicon glyphicon-oil"></span>10 </li>
<li class="tab1"><span class="glyphicon glyphicon-asterisk"></span>   </li>
<li class="tab1"><span class="glyphicon glyphicon-home"></span>  </li>
<li class="tab2"> <span class="glyphicon glyphicon-chevron-down"></span>     KATEGORIJE </li>
<li class="tab2">RADNJE</li>
<li class="tab2">VOZILA</li>
<li class="tab2">NEKRETNINE</li>
<li class="tab2">NAJNOVIJE</li>
<li class="tab2">HITNO</li>
<li class="tab2">USLUGE</li>
<li class="tab2">        <span class="glyphicon glyphicon-chevron-down"></span>     OSTALI LINKOVI </li>
</ul>
</nav>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.nav>li>a {
padding: 10px 3px;
font-weight: bold;
color:white;
font-size: 13px;
}
.tab1 {
background-color:#324255;
height: 42px;
}
.tab2 {
background-color:#405072;
height: 42px;
}
.tab3 {
background-color: #405072;
height:42px;
}
.nav-tabs li {
border-left: 1px solid #52617b;
border-right: 1px solid #52617b;
}
ul {
background-color: #405072;
height:43px;
}
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
I'll try to be as specific as I can so you understand it all.
1. When I pasted your html and css in the fiddle, I forgot to add the link for bootstrap stylesheet in the html as well. Bootstrap uses a CDN as you might know and it allows you to link with their stylesheet without downloading it and actually placing it in your website folders.
This is the link I am referring to:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
I just added this above all the html in the fiddle.
To answer your original question. Bootstraps stylesheet is overwriting your stylesheet.
Your <li> is working fine and has a green background. But the <a> has a background color of its own which is coming from bootstrap.
See fiddle here https://jsfiddle.net/otuy1foo/3/. And in the css I placed the css code in comments at the bottom.
/*This is the css you need to add*/
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover {
border-color: transparent !important;
background-color: transparent !important;
}
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example