Made navbar fixed position
This commit is contained in:
parent
a10dff41ed
commit
276512841f
|
@ -0,0 +1,3 @@
|
||||||
|
body {
|
||||||
|
margin: 0; /* Remove body margins */
|
||||||
|
}
|
|
@ -1,18 +1,16 @@
|
||||||
body {
|
|
||||||
margin: 0; /* Remove body margins */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile View */
|
/* Mobile View */
|
||||||
|
|
||||||
.navbar-background {
|
.navbar-background {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background-color: #252631;
|
background-color: #252631;
|
||||||
padding: 15px;
|
|
||||||
padding-right: 40px;
|
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
}
|
}
|
||||||
.navbar-container {
|
.navbar-container {
|
||||||
|
@ -21,14 +19,26 @@ body {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.navbar-hamburger {
|
.navbar-hamburger {
|
||||||
font-size: 20pt;
|
font-size: 20pt;
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: start;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
max-height: 35px;
|
max-height: 35px;
|
||||||
|
min-width: 30px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.navbar-hamburger:hover {
|
||||||
|
background-color: #ffffff14;
|
||||||
|
font-size: 22pt;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.navbar-closed{
|
.navbar-closed{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -47,9 +57,8 @@ body {
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
|
padding-left: 5px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-family: Source Sans Pro;
|
font-family: Source Sans Pro;
|
||||||
}
|
}
|
||||||
|
@ -64,7 +73,6 @@ body {
|
||||||
.navbar-title {
|
.navbar-title {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
body {
|
||||||
|
margin: 0; /* Remove body margins */
|
||||||
|
}
|
|
@ -1,7 +1,8 @@
|
||||||
<!DOCTYPE html><html><head>
|
<!DOCTYPE html><html><head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Yew App</title>
|
<title>Yew App</title>
|
||||||
<link rel="stylesheet" href="/navbar-3dafbc875c0918b7.css">
|
<link rel="stylesheet" href="/body-1dfd5cf65077c12.css">
|
||||||
|
<link rel="stylesheet" href="/navbar-c70cbfee705a9cf.css">
|
||||||
<link rel="stylesheet" href="/landing-c920ca43256fdcb9.css">
|
<link rel="stylesheet" href="/landing-c920ca43256fdcb9.css">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||||
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
||||||
|
|
|
@ -1,18 +1,16 @@
|
||||||
body {
|
|
||||||
margin: 0; /* Remove body margins */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile View */
|
/* Mobile View */
|
||||||
|
|
||||||
.navbar-background {
|
.navbar-background {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background-color: #252631;
|
background-color: #252631;
|
||||||
padding: 15px;
|
|
||||||
padding-right: 40px;
|
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
}
|
}
|
||||||
.navbar-container {
|
.navbar-container {
|
||||||
|
@ -21,14 +19,26 @@ body {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.navbar-hamburger {
|
.navbar-hamburger {
|
||||||
font-size: 20pt;
|
font-size: 20pt;
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: start;
|
justify-content: center;
|
||||||
margin-top: 10px;
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
max-height: 35px;
|
max-height: 35px;
|
||||||
|
min-width: 30px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.navbar-hamburger:hover {
|
||||||
|
background-color: #ffffff14;
|
||||||
|
font-size: 22pt;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.navbar-closed{
|
.navbar-closed{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -47,9 +57,8 @@ body {
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
|
padding-left: 5px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-family: Source Sans Pro;
|
font-family: Source Sans Pro;
|
||||||
}
|
}
|
||||||
|
@ -64,7 +73,6 @@ body {
|
||||||
.navbar-title {
|
.navbar-title {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Yew App</title>
|
<title>Yew App</title>
|
||||||
|
<link data-trunk type="text/css" href="css/body.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/navbar.css" rel="css" />
|
<link data-trunk type="text/css" href="css/navbar.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/landing.css" rel="css" />
|
<link data-trunk type="text/css" href="css/landing.css" rel="css" />
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||||
|
|
Loading…
Reference in New Issue