hoernschen/squirrel-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Navigation for mobile

Browse source
This commit is contained in:
Hoernschen 2020-12-14 00:35:01 +01:00
parent 4ae49b6b0b
commit cbcb89f9fa
2 changed files with 92 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

79
css/header.css
View file

@ -1,21 +1,24 @@
.header {
margin: auto;
padding: 1.5rem;
padding-bottom: 0rem;
padding-bottom: 0.5rem;
text-align: center;
display: flex;
font-size: large;
overflow: hidden;
height: auto;
}
.logo {
display: flex;
width: 48pt;
height: 3.5rem;
}
.header-items {
padding-right: 1rem;
margin: auto;
margin-right: 0px;
/* padding-right: 1rem;
margin-right: 0px; */
margin-left: 0px;
display: flex;
float: right;
right: 0px;
@ -23,10 +26,26 @@
text-align: right;
}
.header-items .menu-icon {
display: none;
font-size: larger;
}
.header-item {
margin-left: 2.5rem
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
@ -36,6 +55,58 @@
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.header-items .dropdown .dropbtn {
display: none;
}
.header-items .header-item {
display: none;
}
.header-items a.menu-icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.header-items.responsive {position: relative;}
.header-items.responsive .menu-icon {
position: absolute;
right: 0;
top: 0;
}
.header-items.responsive a {
float: none;
display: block;
text-align: left;
}
.header-items.responsive .dropdown {float: none;}
.header-items.responsive .dropdown-content {position: relative;}
.header-items.responsive .dropdown .dropbtn {
display: block;
width: 100vw;
text-align: left;
}
.header-items.responsive .header-item {
display: block;
width: 100vw;
text-align: left;
}
}