Fediversity/fediversity_website_archive
Archived
7
0
Fork 0
forked from laurens/fediversity_website
Code Pull requests Activity

Verbeteren navigatie-menu en inherit font ipv arial voor button

Browse source
This commit is contained in:
Michael Boelen 2023-05-17 20:56:54 +02:00
parent 55fcbc0c9c
commit 534c5041cc
1 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
themes/nluug/assets/scss/styles_navigation_menu.scss
View file

@ -47,7 +47,7 @@ label span::after, label span::before {
background: inherit; background: inherit;
width: inherit; width: inherit;
height: inherit; height: inherit;
} }
label span::before{ label span::before{
top: 8px; top: 8px;
@ -55,7 +55,7 @@ label span::before{
label span::after { label span::after {
bottom: 8px; bottom: 8px;
} }
label::before { label::before {
position: absolute; position: absolute;
@ -81,6 +81,8 @@ ul.menu li {
ul.menu li button { ul.menu li button {
font-size: inherit; font-size: inherit;
font-family: inherit;
font-weight: bold;
border: none; border: none;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
@ -103,7 +105,7 @@ ul.menu li a, ul li button {
top: 3.2rem; top: 3.2rem;
left: 0; left: 0;
right: 0; right: 0;
/* hide dropdown on small screens */ /* hide dropdown on small screens */
visibility: hidden; visibility: hidden;
/* smooth transitioning */ /* smooth transitioning */
@ -158,11 +160,10 @@ li:focus-within > button > .arrow {
max-width: 200px; max-width: 200px;
} }
} }
@media (min-width: 640px) { @media (min-width: 800px) {
.header-content { .header-content {
display: flex; display: flex;
} }
.menus { .menus {
position: static; position: static;
visibility: visible; visibility: visible;
@ -196,11 +197,9 @@ li:focus-within > button > .arrow {
background-color: #fff; background-color: #fff;
border-radius: 0 0 0.5rem 0.5rem; border-radius: 0 0 0.5rem 0.5rem;
} }
ul.menu li:hover .dropdown { ul.menu li:hover .dropdown {
height: 135px; height: 135px;
} }
ul.menu li:hover > button > .arrow { ul.menu li:hover > button > .arrow {
transform: rotate(-225deg); transform: rotate(-225deg);
margin-top: 4px; margin-top: 4px;