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 { ...@@ -19,6 +19,37 @@ a {
} }
.sr-only { .sr-only {
color: #000;
background-color: #fff; 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; 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(); ?> <?php $account = $this->auth()->getManager(); ?>
<div class="banner container navbar"> <div class="banner container navbar">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse" aria-hidden="true">
<span class="sr-only">Toggle navigation</span> <i class="fa fa-bars"></i>
<i class="fa fa-bars" aria-hidden="true"></i>
</button> </button>
<a class="navbar-brand lang-<?=$this->layout()->userLang ?>" href="<?=$this->url('home')?>">VuFind</a> <a class="navbar-brand lang-<?=$this->layout()->userLang ?>" href="<?=$this->url('home')?>">VuFind</a>
</div> </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