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;
}
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 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>
So the css that I have works for both html pages, however, the current link styling only works on the first page and doesn't transfer to the 2nd page when clicked. Do you know why this would be?
css that handles the current link styling
li.current > a:link {
border-bottom: 0.3px solid #000000;
}
1st page html (works on this)
<!--Header-->
<header class="boxed" id="header-white">
<div class="header-margin">
<div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
<ul class="header-nav">
<li class = "current"><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
<li><a class="ajax-link" href="about-me.html">About me</a></li>
</ul>
2nd html page (works on this one, only if opened first)
<!--Header-->
<header class="boxed" id="header-white">
<div class="header-margin">
<div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
<ul class="header-nav">
<li><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
<li class = "current"><a class="ajax-link" href="about-me.html">About me</a></li>
</ul>
Please try below css for get link in second page. You need to put "a:visited" property.
<style type="text/css">
li.current > a:link {
border-bottom: 0.3px solid green;
color: red;
}
li.current > a:visited {
border-bottom: 0.3px solid green;
color: red;
}
</style>
The behavior you're seeing is expected. The :link pseudo-class refers to links that have never been visited. By definition, the user must have clicked the link to the current page to get to it, so it will not be selected by :link.
You need to use li.current > a:visited.
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.
Thanks for any help you can provide.
-A
EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Contact</li>
<li>Now Playing</li>
<li class="dropdown">
Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs</li>
<li>Host an Event</li>
<li>Educational Initiatives</li>
</ul>
</li>
<li class="dropdown">
Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li>Physics Homepage</li>
<li>Physics and Astronomy</li>
</ul>
</li>
<li>Volunteer</li>
<li>FAQ</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The default navbar html code is the following:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:
.navbar-inner {
min-height: 40px;
}
You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a> padding as well.
.navbar .nav > li > a {
float: none;
**padding: 10px 15px 10px;**
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
}
.navbar .brand {
display: block;
float: left;
**padding: 10px 20px 10px;**
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777;
text-shadow: 0 1px 0 #FFF;
}
If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-height property and just change its value, adjusting the padding of the elements I've mentioned above.
For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.
EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-inner min-height too, and play with the values.
Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:
#media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
where 1200px was changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.