I have a responsive menu that on large screens you see the drop-down menu centered on the page. But on small screens you see a hamburger menu also centered on the page, and I want the icon to be seen on the left. How can i do that? It looks like this: https://postimg.cc/dLFkHH1Z
On large screens there is no problem but in small screens i want to see the hamburguer icon on the left.
Thanks in advance.
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Add a black background color to the top navigation */
.topnav {
background-color: white;
overflow: hidden;
display:flex;
justify-content: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
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;
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;
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, .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;
}
}
<html>
<head>
<title>Menú Desplegable Responsive</title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="menu.js" type="text/javascript"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
</body>
</html>
i have found the solution.
document.getElementById("menuBars").onclick = function(e) {
e.preventDefault();
var x = document.getElementById("myTopnav");
x.classList.toggle("responsive");
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: white;
text-align: center;
}
/*
.topnav .fl {
float: left;
}
.topnav .fr {
float: right;
}
*/
.topnav .main {
display: inline-block;
}
.topnav .main a {
float: left;
}
.topnav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
main {
padding-left: 16px;
}
#media screen and (max-width: 600px) {
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menú</title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="menu.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<nav class="topnav" id="myTopnav">
Home
<a href="#about" >About</a>
News
Contact
<!--<a href="" class="icon" id="menuBars">-->
☰
<i class="fa fa-bars"></i>
</a>
</nav>
</body>
</html>
Related
I have several pages with the following configuration:
a background-image(centered) and vertical menu (button) in a div.
=> https://ibb.co/3Cmf0dt
The div-menu, will be placed on the right but depending on a page to another, once centered, once a little higher.
I would like to have your help for the CSS of the div-menu.
How is it positioned so that it is reduced (with the buttons) and always remains in the same place compared to the background image ?
Here is my code(but button don't reduce and div possition refer to page and not image-background):
=> https://ibb.co/9cQL1yD
THANKS IN ADVANCE !!
Open this in a tab then resize your window.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">×</i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>
Here's the link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
I'm trying to add a slide-down transition when the menu is 'opened' but i just can't get my head wrapped around it. Tried numerous things but can't get the transition to work.
I tried adding it to some of the classes with no result.
I read something about display blocking the transition and should be replaced with visibility. That results in two line's with the backgroundcolor and the dropdown button disapearing.
Hope someone can shed some light on this.
HTML:
<div class="topnav" id="myTopnav">
Home
Steppen
Walks
Events
Agenda
Wie zijn wij?
Tips
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
CSS:
.topnav {
background-color: #3b3b3b;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #5bdeff;
text-align: center;
padding: 1% 2%;
text-decoration: none;
font-size: 22px;
}
.topnav a:hover {
background-color: #5bdeff;
color: black;
}
.topnav a.active {
background-color: #5bdeff;
color: black;
}
.topnav .icon {
display: none;
}
.topnav a:active {
position: relative;
top: 1px;
}
.responsive.fa-bars {
color:#000
}
#media (max-width: 900px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
I've been trying to make my nav (including the "works" dropdown button) responsive by making them appear through the usual three parallel lines on the top right margin that would then display what I've written on the nav bar when clicked from a mobile.
I've been trying for about two hours without a decent result.
I'm pretty sure it's not the hardest thing but I can't seem to get it right. Would love to understand how it works. Here's the desktop size, non-responsive navbar.
Here's the html:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/AURORA-YLOW-FIN.png" alt="logo"></div>
<div class="menu">
<ul>
<li>ALL</li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
<li>ABOUT</li>
<li>CONTACT</li>
<li><i class="fa fa-instagram"></li></i>
</ul>
</div>
</body>
</html>
and here is the CSS:
.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}
.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}
.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}
A basic burger-menu can be achieved by doing the following steps:
1) Create a with the class of burger-menu as a previous sibling element of the navigation you want to hide on mobile screen width.
a) You dont want this to show on your desktop medias, so in the css, style it as display: none;
2) Create a media query for the desired device. Let's say 480px for a mobile device.
3) Within this media query, style the navigation that you want to appear on hover (or click) as display: none;
4) Within this media query, style your burger-menu. In my example, I've styled something very basic, for time reasons, but you can research using spans to make a responsive burger menu.
5) Within this media query, declare an on hover pseudo-class for your burger-menu which accesses the hidden navigation. Since you placed the burger-menu as a the previous sibling element of your navigation, you can use the + css rule to target it like so
.burger-menu:hover + .menu {
}
This means that, when you hover over the burger-menu, you will affect the css of .menu. You can place how .menu's styles will be affected in the above CSS selector.
Here is a basic example of how this process works with your code.
Add this to your html, before your .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Add this to your css file, at the bottom
.burger-menu {
display: none;
}
#media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Typically, you would advance this by using toggleClass with JQuery to add and remove display to your navigation menu on clicking the burger menu.
P.s the benefit of using spans to create your burger-menu will be when you want it to have nice animation, changing from a burger menu to a cross, or arrow, etc.
here is a solution with a responsive menu list. Now you should add this menu list to your project.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.dropdown-content a, li {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .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;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
ALL
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
ABOUT
CONTACT
<a href="https://www.instagram.com/auroracatera" target="_blank"> <i class="fa fa-instagram"></i>
</a>
☰
</div>
I hope you can do something with it and add it to your project ...
I'm working on a website for a school project, i took this format from w3schools and I need to adjust it a bit:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .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;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
More Links
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
i tried to have sub-sub tabs, means that another menu will continue from "More links".
i tried to do some stuff but failed.
and how do i keep the top menu always in place (even after i go to a different link)?
Here's a really basic example that could be improved. There are LOTS of ways to do this. Just a couple of basic functions on mouse enter of the required elements, and changing the CSS classes to keep the sub nav visible on screen if the mouse is over it.
https://codepen.io/cove/pen/VwLdLKr
The javascript:
var dropdown_sub_nav = document.getElementById('dropdown-sub-nav');
var sub_links_1 = document.getElementById('sub-links-1');
dropdown_sub_nav.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
});
dropdown_sub_nav.addEventListener('mouseout', (event) => {
sub_links_1.setAttribute('class', 'sub-links');
});
sub_links_1.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
})
I would ask you how you are going to make this type of navigation truly responsive, as these kinds of hover states aren't user friendly on mobile devices. Will you hide this nav, and show a mobile friendly one?
I have a problem with the navbar. I would like the "register" button to be to the right of the "login" button, with a space of xxxpx from the right edge of the window, so that when you have the hover on the "login" button the form with the inputs does not appear off the screen. I tried to put the "register" button inside "" but due to the CSS code I get the login form even when there is hover on the "register" button and not is a desired behavior. How can I place the "register" button to the right of the "login" button?
P.S. This is code for anguar but does the same.
Thanks.
.space {
width: 350px;
}
.dropdown {
float: right;
}
.forminput {
margin: 5px;
}
.formbutton {
margin: 5px;
float: right;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
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 {
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn-login {
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-login {
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-login a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn-login {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content-login 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-login {
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-login {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.space {
width: 0px;
}
.dropdown {
float: left;
}
}
/* 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-login {
position: relative;
}
.topnav.responsive .dropdown .dropbtn-login {
display: block;
width: 100%;
text-align: left;
}
}
<div class="topnav" id="myTopnav">
<a routerLink="/" class="active">Home</a>
<a routerLink="/gallery">Gallery</a>
<div class="dropdown">
<button class="dropbtn-login">Login</button>
<div class="dropdown-content-login">
<form>
<input class="forminput" placeholder="username">
<input class="forminput" type="password" placeholder="password">
<button class="formbutton" type="submit">Login</button>
</form>
</div>
</div>
<a style="float:right" routerLink="/register">Register</a>
<div style="float:right" class="space"></div>
☰
</div>
Simply place anchor tag for 'Register' button above the 'dropdown' div.
<div class="topnav" id="myTopnav">
<a routerLink="/" class="active">Home</a>
<a routerLink="/gallery">Gallery</a>
<a style="float:right" routerLink="/register">Register</a>
<div class="dropdown">
<button class="dropbtn-login">Login</button>
<div class="dropdown-content-login">
<form>
<input class="forminput" placeholder="username">
<input class="forminput" type="password" placeholder="password">
<button class="formbutton" type="submit">Login</button>
</form>
</div>
</div>
<div style="float:right" class="space"></div>
☰
</div>