diff options
Diffstat (limited to 'src/components/AppHeader')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 19 |
1 files changed, 17 insertions, 2 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 8dacd03d..7974f70a 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -1,7 +1,9 @@ <template> <div> - <a href="#main-content">Skip to main content</a> - <header> + <a class="link-skip-nav btn btn-light" href="#main-content" + >Skip to content</a + > + <header id="page-header"> <b-navbar toggleable="lg" variant="dark" type="dark"> <b-navbar-nav small> <b-nav-text>BMC System Management</b-nav-text> @@ -91,4 +93,17 @@ export default { .navbar-text { padding: 0; } + +.link-skip-nav { + position: absolute; + top: -60px; + left: 0.5rem; + z-index: 10; + transition: 150ms cubic-bezier(0.4, 0.14, 1, 1); + + &:focus { + top: 0.5rem; + transition-timing-function: cubic-bezier(0, 0, 0.3, 1); + } +} </style> |