fixed mobile menu
some script got removed during the restruction that included the js handler for the mobile menu, so that was replaced with a css toggle to keep it simple
This commit is contained in:
parent
a5cf8816f0
commit
bdca7f4ace
2 changed files with 28 additions and 9 deletions
|
@ -122,7 +122,7 @@ header > nav > div > div.mobile-menu {
|
|||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
left: 5px;
|
||||
transition: all 0.2s linear;
|
||||
background: var(--white);
|
||||
}
|
||||
|
@ -135,8 +135,24 @@ header > nav > div.nav-right button {
|
|||
color: var(--white);
|
||||
}
|
||||
|
||||
header > nav > div.nav-right > button.menu-toggle {
|
||||
header > nav > div.nav-right > label#menu-toggle-label {
|
||||
display: none;
|
||||
border-radius: 3px;
|
||||
padding: 6px 5px 0px;
|
||||
background: var(--secondary-highlight);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mobile-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mobile-toggle:not(:checked) ~ #main-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mobile-toggle:checked ~ .mobile-menu {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header > nav > div.nav-right div.submenu {
|
||||
|
@ -158,8 +174,8 @@ header > nav > div.nav-right div.submenu button {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 530px) {
|
||||
header > nav > div.nav-right > button.menu-toggle {
|
||||
display: inline;
|
||||
header > nav > div.nav-right > label#menu-toggle-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header > nav > div > div.menu {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</a>
|
||||
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">
|
||||
|
@ -21,9 +21,12 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<button class="menu-toggle">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</button>
|
||||
<label id='menu-toggle-label' for="mobile-toggle">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
|
||||
</svg>
|
||||
</label>
|
||||
<input id="mobile-toggle" type="checkbox" />
|
||||
|
||||
<div class="mobile-menu">
|
||||
@if($title == "Settings" )
|
||||
|
@ -38,7 +41,7 @@
|
|||
</a>
|
||||
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
|
||||
<svg id="nav-menu-icon" class="icon">
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
|
||||
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">
|
||||
|
|
Loading…
Reference in a new issue