transparent-navbar
This commit is contained in:
parent
d1f43a82bb
commit
386adba540
3 changed files with 1 additions and 42 deletions
|
@ -4,7 +4,6 @@ const updateNavBar = () => {
|
||||||
const themeIcon = document.getElementById('navbar-theme-icon-svg')
|
const themeIcon = document.getElementById('navbar-theme-icon-svg')
|
||||||
|
|
||||||
if (window.scrollY > 40) {
|
if (window.scrollY > 40) {
|
||||||
topNavbar?.classList.remove('transparent-navbar')
|
|
||||||
topNavbar?.classList.add('shadow')
|
topNavbar?.classList.add('shadow')
|
||||||
|
|
||||||
navbarToggler?.classList.remove('navbar-dark')
|
navbarToggler?.classList.remove('navbar-dark')
|
||||||
|
@ -21,7 +20,6 @@ const updateNavBar = () => {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
topNavbar?.classList.remove('shadow')
|
topNavbar?.classList.remove('shadow')
|
||||||
topNavbar?.classList.add('transparent-navbar')
|
|
||||||
|
|
||||||
navbarToggler?.classList.remove('navbar-light')
|
navbarToggler?.classList.remove('navbar-light')
|
||||||
navbarToggler?.classList.add('navbar-dark')
|
navbarToggler?.classList.add('navbar-dark')
|
||||||
|
|
|
@ -119,23 +119,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.transparent-navbar {
|
|
||||||
background-color: rgb(255,255,255) !important;
|
|
||||||
opacity: 0.1;
|
|
||||||
.navbar-brand {
|
|
||||||
color: get-light-color('inverse-text-color');
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
color: get-light-color('inverse-text-color');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.feather-menu {
|
|
||||||
stroke: get-light-color('inverse-text-color');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#themeMenu {
|
#themeMenu {
|
||||||
width: 25px;
|
width: 25px;
|
||||||
min-width: 3rem;
|
min-width: 3rem;
|
||||||
|
@ -157,13 +140,6 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.transparent-navbar {
|
|
||||||
.navbar-nav .active,
|
|
||||||
li a:hover {
|
|
||||||
color: get-light-color('accent-color');
|
|
||||||
@include transition();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#top-navbar-divider {
|
#top-navbar-divider {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -261,21 +237,6 @@ html[data-theme='dark'] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.transparent-navbar {
|
|
||||||
.navbar-brand {
|
|
||||||
color: get-dark-color('text-color');
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
color: get-dark-color('text-color');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.feather-menu {
|
|
||||||
stroke: get-dark-color('text-color');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img.theme-icon {
|
img.theme-icon {
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,7 +71,7 @@
|
||||||
{{ $navBarTitle = site.Title }}
|
{{ $navBarTitle = site.Title }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-xl top-navbar shadow {{ if .IsHome}}transparent-navbar homepage{{end}}" id="top-navbar">
|
<nav class="navbar navbar-expand-xl top-navbar shadow " id="top-navbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{{ if not .IsHome }}
|
{{ if not .IsHome }}
|
||||||
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
|
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue