Skip to content
Snippets Groups Projects
Commit d2a4c74c authored by Chris Hallberg's avatar Chris Hallberg Committed by Demian Katz
Browse files

Visual-only collapsing of header and facets.

- Removes need for "Toggle navigation" label.
- Changes how Bootstrap's .collapse works.
parent afcd118f
No related merge requests found
......@@ -19,6 +19,37 @@ a {
}
.sr-only {
color: #000;
background-color: #fff;
}
/**
* instead of display: none, keep things sr accessible
* https://tailwindcss.com/docs/screen-readers/
*/
.collapse.collapse:not(.in) {
position: absolute;
display: block;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
color: #000;
background-color: #fff;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@media (min-width: 768px) {
.navbar-collapse.collapse:not(.in) {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
}
<?php $account = $this->auth()->getManager(); ?>
<div class="banner container navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" aria-hidden="true"></i>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse" aria-hidden="true">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand lang-<?=$this->layout()->userLang ?>" href="<?=$this->url('home')?>">VuFind</a>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment