Reset navbar
This commit is contained in:
parent
0f89c687e0
commit
a4f5367c0d
269
css/styles.css
269
css/styles.css
@ -16,173 +16,118 @@ body {
|
||||
|
||||
/* NAVBAR STYLING BELOW */
|
||||
|
||||
/* Navbar Style */
|
||||
.navbar {
|
||||
/* Add a black background color to the top navigation */
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
background-color: #6b98f2;
|
||||
font-family: sans-serif;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: auto; /*Changed to auto, was previously 0*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Navbar Title & Logo */
|
||||
.navbar img {
|
||||
float: left;
|
||||
text-align: center;
|
||||
padding: 15px 15px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* Navbar Links Style */
|
||||
.navbar a {
|
||||
}
|
||||
|
||||
/* Style the links inside the navigation bar */
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 17px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Hide 'Home' link by default, prefer icon */
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navbar Logo Link Style */
|
||||
.navbar a.logo {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* Add an active class to highlight the current page */
|
||||
.active {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Hide the link that should open and close the topnav on small screens */
|
||||
.topnav .icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dropdown container - needed to position the dropdown content */
|
||||
.dropdown {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
/* Navbar Links Style */
|
||||
.navbar i {
|
||||
float: right;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 17px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Style the dropdown button to fit inside the topnav */
|
||||
.dropdown .dropbtn {
|
||||
font-size: 17px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Style the dropdown content (hidden by default) */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Style the links inside the dropdown */
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Navbar Hover Style */
|
||||
.navbar a:hover, .dropdown:hover {
|
||||
background-color: #115bf0;
|
||||
}
|
||||
|
||||
/* Droplist Hover Style */
|
||||
.droplist a:hover {
|
||||
background-color: #00349c;
|
||||
}
|
||||
|
||||
/* Navbar Active Class */
|
||||
.navbar a.active, .navbar img.active, .navbar button.active {
|
||||
background-color: #3075ff;
|
||||
}
|
||||
|
||||
/* Hide Hamburger Icon */
|
||||
.navbar .icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dropdown Container Class */
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Dropdown Button Styling */
|
||||
.dropdown .dropbutton {
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
padding: 17px 17px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Dropdown Content Styling */
|
||||
.droplist {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #115bf0;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Style the links inside the dropdown */
|
||||
.droplist a {
|
||||
float: none;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
|
||||
.dropdown:hover .droplist {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When the screen is less than 800 pixels wide, hide all links and replace 'Home' icon with link. Show the link that contains should open and close the topnav (.icon) */
|
||||
@media screen and (max-width: 800px) {
|
||||
.navbar a, .navbar img, .dropdown .dropbutton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block
|
||||
}
|
||||
|
||||
.navbar a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
.navbar i {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Navbar Active Class */
|
||||
.navbar a.active, .navbar img.active, .navbar button.active {
|
||||
background-color: #3075ff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
|
||||
@media screen and (max-width: 800px) {
|
||||
.navbar.responsive {position: relative;}
|
||||
.navbar.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.navbar.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar.responsive i {
|
||||
display: none
|
||||
}
|
||||
|
||||
.navbar.responsive .dropdown {float: none;}
|
||||
.navbar.responsive .droplist {position: relative;}
|
||||
.navbar.responsive .dropdown .dropbutton {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Add a dark background on topnav links and the dropdown button on hover */
|
||||
.topnav a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Add a grey background to dropdown links on hover */
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
|
||||
@media screen and (max-width: 600px) {
|
||||
.topnav a:not(:first-child), .dropdown .dropbtn {
|
||||
display: none;
|
||||
}
|
||||
.topnav a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
|
||||
@media screen and (max-width: 600px) {
|
||||
.topnav.responsive {position: relative;}
|
||||
.topnav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.topnav.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.topnav.responsive .dropdown {float: none;}
|
||||
.topnav.responsive .dropdown-content {position: relative;}
|
||||
.topnav.responsive .dropdown .dropbtn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
26
index.html
26
index.html
@ -4,28 +4,28 @@
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<link rel="stylesheet" href="./css/styles.css">
|
||||
<script src="/js/navbar.js"></script>
|
||||
<title>Fred Boniface - Hello</title>
|
||||
<title>Fred Boniface</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="navbar" id="navbar">
|
||||
<a class="logo" href="/"><img src="/images/navbar/home.svg" alt="Home" width="26" height="26"></a>
|
||||
<div class="mobile">
|
||||
<a href="/">Home</a>
|
||||
</div>
|
||||
<div class="topnav" id="myTopnav">
|
||||
<a href="#home" class="active">Home</a>
|
||||
<a href="#news">News</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<div class="dropdown">
|
||||
<button class="dropbutton">Downloads ⤵</button>
|
||||
<div class="droplist">
|
||||
<a href="/downloads/vcard.vcf">⤷ vCard</a>
|
||||
<a href="#">⤷ Null</a>
|
||||
<button class="dropbtn">Dropdown
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="#">Link 1</a>
|
||||
<a href="#">Link 2</a>
|
||||
<a href="#">Link 3</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/pgp.php">GPG</a>
|
||||
<i>Fred Boniface</i>
|
||||
<a href="#about">About</a>
|
||||
<a href="javascript:void(0);" class="icon" onclick="hamburger()">☰</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
|
||||
function hamburger() {
|
||||
var x = document.getElementById("navbar");
|
||||
if (x.className === "navbar") {
|
||||
var x = document.getElementById("myTopnav");
|
||||
if (x.className === "topnav") {
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
x.className = "navbar";
|
||||
x.className = "topnav";
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user