We Keep Coding

Is there a solution for this button problem?

I am building up my skills by designing a mini web pag
so I started the navigation bar .
The button "Template" is supposed to change the view of the and display the lists but when I click it nothing happens.
Can anyone help me ?
The code:
html:
<div class="menu-toggle">
<h1 id="logo">PROTOCOL</h1>
<li class="right table" id="table"><a class="list template" href="#template" >☰</a></li>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul id="navigate" class="navigate">
<li><a class="list home" href="#home"> Home</a></li>
<li><a class="list" href="#conntacting">Contact us</a></li>
<li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
<li class="right"><a class="list" href="#logging">Log in</a></li>
</ul>
</nav>
CSS:
I designed my navigation bar to be displayed when the user press the "template" button
and hide it again by pressing the same button.
#media screen and ( max-width : 675px){
.container{
position: relative;
}
.menu-toggle{
text-align: center;
float: none;
display: block;
}
.template{
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
li.table{
left: 80px;
height: 20px;
}
.nav{
height: 90px;
}
.template:hover{
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
.navigate,.active{
text-align: center;
display: grid;
grid-template-columns: auto;
background-color: #b00000;
margin: 0;
width: 100%;
position: absolute;
top:90px;
transition: all 0.5 ease;
left: 100%;
}
li.right{
display: table;
padding: 0;
}
.menu-toggle.bar{
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.active{
text-align: center;
display: grid;
grid-template-columns: auto;
background-color: #b00000;
margin: 0;
width: 100%;
position: absolute;
top:90px;
transition: all 0.5 ease;
}
}
JavaScript:
I brought the button "template" and "ul" by it ids
var template = document.getElementById('template');
var nav = document.getElementById('navigate');
template.onclick = function () {
if (nav.className === ('navigate')) {
nav.className += 'active';
} else {
nav.className = 'navigate';
};

You can use classList.toggle method.
Also, to tidy up things, I've removed the list buttons, changed menu font color to white, and removed the duplicated CSS on classes navigate and active: now .active just displays the navigation menu.
(The navigation menu was exploding the width when opened, and it was clobbering the menu icon, so I just removed position: absolute; and width: 100% from it)
Far from done here. Try to change things in steps, and to study the css rules on MDN, instead of doing many things at once.
var template = document.querySelector('.template');
var nav = document.querySelector('.navigate');
template.onclick = function() {
nav.classList.toggle('active');
};
#media screen and ( max-width: 675px) {
.container {
position: relative;
}
.menu-toggle {
text-align: center;
float: none;
display: block;
}
.template {
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
li.table {
left: 80px;
height: 20px;
}
.nav {
height: 90px;
}
.template:hover {
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
.navigate {
text-align: center;
display: none;
background-color: #b00000;
list-style: none;
margin: 0;
left: 0;
top: 90px;
transition: all 0.5 ease;
}
a.list:not(.template) {
text-decoration: none;
color: white;
}
li.right {
display: table;
padding: 0;
}
.menu-toggle.bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.active {
display: grid;
grid-template-columns: auto;
}
<div class="menu-toggle">
<h1 id="logo">PROTOCOL</h1>
<li class="right table" id="table"><a class="list template" href="#template">☰</a></li>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav id="navigate">
<ul class="navigate">
<li><a class="list home" href="#home"> Home</a></li>
<li><a class="list" href="#contacting">Contact us</a></li>
<li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
<li class="right"><a class="list" href="#logging">Log in</a></li>
</ul>
</nav>

your code has many mistakes please create button having template class.
however i updated your javascript for current use
template.onclick = function () {
if (nav.className === 'navigate') {
nav.classList.remove('navigate')
nav.className = 'active';
}
else {
nav.classList.remove('active')
nav.className = 'navigate';
}
}
}

I'm trying to do a Hamburger Menu, but it won't show up when I click it

I apologize if I make any mistakes but I just joined earlier and I am still a newbie to web development. I tried practicing a hamburger menu earlier but it won't show up. I was hoping if anyone could guide me on which part did I do wrong. Here's the code.
var show = document.getElementById("nav-links");
function showMenu() {
show.style.right = "0";
}
function closeMenu() {
show.style.right = "-200px";
}
#media (max-width: 700px) {
.nav-bar {
padding: 10px 30px;
}
.fa-bars {
position: absolute;
right: 20px;
top: 10px;
}
.nav-bar .fa {
display: block;
color: #f1f1f1;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
}
.nav-links {
height: 100vh;
width: 200px;
background: #111;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 0.5s;
position: absolute;
}
.nav-links ul a {
display: block;
}
.nav-links .btn {
float: none;
margin-left: 25px;
margin-top: 10px;
}
}
<div class="nav-bar">
<div class="nav-logo">
GottaGo
</div>
<div class="nav-links">
<i class="fa fa-close" onclick="closeMenu()" id="nav-links"></i>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>GoWhere</li>
</a>
<a href="#">
<li>About</li>
</a>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i class="fa fa-bars" onclick="showMenu()" id="nav-links"></i>
</div>
My plan was that, when I click the menu it will show this https://i.imgur.com/Zds2D9g.png but it was not showing when i click it. I tried inserting an alert(); just to test it, when I clicked it, instead of the menu it just shows the alert but not the menu I was hoping for. I apologize, this is my first post here so I hope I didn't make anyone confused.

On the snippet, you have changed the style of the close icon. And to show hamburger menu, the nav-menu style should be changed.
So I have added new id nav-menu to nav-links div and updated the style of that.
var show = document.getElementById("nav-menu");
function showMenu() {
show.style.right = 0;
}
function closeMenu() {
show.style.right = "-200px";
}
#media (max-width: 700px) {
.nav-bar {
padding: 10px 30px;
}
.fa-bars {
position: absolute;
right: 20px;
top: 10px;
}
.nav-bar .fa {
display: block;
color: #f1f1f1;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
}
.nav-links {
height: 100vh;
width: 200px;
background: #111;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 0.5s;
position: absolute;
}
.nav-links ul a {
display: block;
}
.nav-links .btn {
float: none;
margin-left: 25px;
margin-top: 10px;
}
}
<div class="nav-bar">
<div class="nav-logo">
GottaGo
</div>
<div class="nav-links" id="nav-menu">
<i class="fa fa-close" onclick="closeMenu()" id="nav-links">close</i>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>GoWhere</li>
</a>
<a href="#">
<li>About</li>
</a>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i class="fa fa-bars" onclick="showMenu()" id="nav-links">test</i>
</div>

Try using this code to show, hide something: using positioning could lead to an ugly result. Remember then to use id to identify only one item and classes to identify a group of items.
Another thing I can suggest is to keep it as simple as possible, dont put too many useless id or classes. try to achieve your result writing less code possible. I hope I helped you, good luck!
HTML:
<div class="nav-bar">
<div class="nav-logo">
GottaGo
</div>
<div class="nav-links" id="nav-links">
<i id="close" class="fa fa-close" onclick="closeMenu()" >Close menu</i>
<ul>
<li>Home</li>
<li>GoWhere</li>
<li>About</li>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
<i id="show" class="fa fa-bars" onclick="showMenu()">Show menu</i>
</div>
CSS
#media (max-width: 700px){
.nav-bar{
padding: 10px 30px;
}
.fa-bars{
position: absolute;
right: 20px;
top: 10px;
}
.nav-bar .fa{
display: block;
color: #f1f1f1;
margin: 10px 25px;
font-size: 22px;
cursor: pointer;
}
.nav-links{
position:absolute;
height: 100vh;
width: 200px;
background: #111;
top: 0;
left: -200px;
text-align: left;
z-index: 2;
}
.nav-links .btn{
float: none;
margin-left: 25px;
margin-top: 10px;
}
}
i:hover{
cursor: pointer;
color:red;
}
Javascript
var show = document.getElementById("nav-links");
function showMenu(){
show.style.display="block";
document.getElementById('show').style.display="none";
document.getElementById('close').style.display="block";
}
function closeMenu(){
show.style.display= "none";
document.getElementById('close').style.display="none";
document.getElementById('show').style.display="block";
}

Everything you use in the code seems pretty old and not really good to learn, i created that little snippet, maybe you get something out of it (i commented everything so you could understand it). Just comment it to ask for details on something
let hamburger = document.getElementById("hamburger"); // Get The Hamburger-Button
let nav = document.getElementById("nav"); // Get the Navigation
hamburger.onclick = ()=>{ // when you click the hamburger, the following function will be exec
nav.classList.toggle("open"); //you toggle the classList of the Navigation with the class "open"
};
body{
overflow-x:hidden;
}
#hamburger{
width:50px;
height:40px;
display:flex; /* Will display the inner bars like we want it (google css flex for more information)*/
flex-direction:column; /* Will display the bars in a column */
align-items: center; /* align the bars to the center */
justify-content:space-around; /* Displays the bars in a even space vertically*/
cursor:pointer; /* When you hover over the Hamburger, your cursor will be a pointer */
}
#hamburger div{
width:30px;
height:4px;
background:black;
}
nav a{
color:white;
text-decoration:none;
}
nav{
position:fixed; /* The position is fixed, and it stays the same when you scroll*/
top:0px; /* Set the y-position to the top at 0px */
right:0px; /* Set the x-position to the right at 0px */
width:20vw; /* Set the width to 20vw (vw = viewpoint Width) you can see vw as a percentage of you current screen. so the value 20vw will use 20% of your available width */
transform: translateX(20vw); /* translate (move) the navigation 20px to the right */
height:100vh; /* set the height to 100vh (hv = viewpointHeight) so 100% of our current available height */
background:black;
transition:transform 500ms; /* set a transition animation for the transform */
}
#nav.open{
transform: translateX(0); /* when you have the open class attached, it will be visible.
}
nav ul{
margin:10px;
list-style-type:none;
padding:0;
}
<html>
<head>
<title>Snippet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
</body>
</html>

How can I get hover to work over a border?

I'm trying to make a navigation for my portfolio and I can't get rid of that weird jump when I hover from one link to another. I know it's because of the bottom-border but i need that for design reasons.
I've been trying to find a solution forever and I can't find it anywhere. I've also tried outline instead of border bottom and ::after, and I've tried javascript/jquery.
.navi--link:link,
.navi--link:visited {
font-size: 7.2rem;
background: -webkit-linear-gradient(#d6d6d6, #5BC0EB);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
overflow: hidden; }
.navi {
position: relative; }
.navi__center {
position: absolute;
right: 2rem;
top: 2rem;
transition: all 2s;
display: block; }
.topDiv .navi--link {
z-index: 1;
position: relative;
font-size: 4rem;
letter-spacing: 6px;
display: block; }
.topDiv {
height: 2.25rem;
width: 100%;
overflow: hidden;
display: block;
border-bottom: 1px solid #d6d6d6; }
.topDiv:hover,
.topDiv:active {
height: 100%;
width: 100%;
overflow: hidden;
backface-visibility: hidden; }
<nav class="navi clearfix">
<ul class="navi__center">
<div class="topDiv">
<li><a class="navi--link" href="index.html">Home</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="about.html">About</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="skills.html">Skills</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="resources.html">Resources</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="portfolio.html">Portfolio</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="#">Contact</a></li>
</div>
</ul>
</nav>
I'm not getting any errors I'm just getting a weird jump when I move from one link to another, and I know it's from the border.

transition duration how can I put it when I click a buttom thats display a menu

I need to put like a slow transition duration to the menu from top to bottom when the menu appears when you click the grey circle.
How can I put timing to this effect???
https://jsfiddle.net/sp78wu0o/20/
<nav class="dropdown">
<div onclick="myFunction()" class="start-button dropbtn"></div>
<div id="myDropdown" class="nav-list dropdown-content">
HOME
HOME
HOME
HOME
HOME
</div>
</nav>

If I understand correctly, You can add a css transition effect as you can see here on the link bellow where I have also correct some of your javascript and html code.
https://jsfiddle.net/sp78wu0o/62/
<ul id="myDropdown" class="nav-list dropdown-content">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
.dropdown {
width: 100%;
position: relative;
display: flex;
justify-content: center;
}
#myDropdown {
margin: 0;
padding: 0;
opacity: 0;
visibility: hidden;
display: inline-block;
text-align: center;
position: absolute;
top: 0;
transition: .2s all ease;
}
#myDropdown li {
padding: 0;
display: inline-block;
list-style: none;
}
.show {
top: 130px !important;
opacity: 1 !important;
visibility: visible !important;
}

How do I set a Fixed Height and Width to a div

I have looked at a lot of questions that have already been asked and can't find and answer that works for me. I am trying to make a logo that has an ampersand in the middle. The Ampersand is supposed to change font familys every few seconds which works. Only issue is that now when it changes font it messes up the who page.
https://codepen.io/anon/pen/BVddWV
Main issues are coming from line 21 in the CSS
.ampersand{
display:inline;
width:35px;
max-width:35px;
height:79px;
max-height: 79px;
font-family:"Exo", sans-serif;
}
Any ideas?

Added display: flex on the <b> tag and removed ampersand styles and made it a span instead of a div and added line-height: 1 to it.
.ampersand {
line-height: 1;
display: inline-block;
width: 60px;
transition: all 1s;
}
<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
$(document).ready(function() {
var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
var counter = 0;
var inst = setInterval(change, 2000);
function change() {
if (counter > fonts.length) {
counter = 0;
}
font_selection = fonts[counter];
$('.ampersand').css("font-family", font_selection);
counter++;
}
});
#import url('https://fonts.googleapis.com/css?family=Quicksand');
#import url('https://fonts.googleapis.com/css?family=Molengo');
#import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
font-family: "Gill Sans", sans-serif;
margin: 0px;
padding: 0px;
}
body {
background-color: #f5f6fa;
}
#header {
width: 100%;
padding: 4% 0px 20px 0px;
}
.logo_text {
font-family: "Molengo", sans-serif;
font-size: 70px;
color: #333;
}
.ampersand {
line-height: 1;
display: inline-block;
width: 60px;
transition: all 1s;
}
.nav {
width: 100%;
padding: 25px 0px 25px 0px;
}
.nav>ul {
padding-top: 15px;
}
.nav>ul>a {
text-decoration: none;
color: #333;
}
.nav>ul>a>li {
color: #333;
font-size: 25px;
padding: 20px 30px 20px 30px;
display: inline;
transition: border 0.1s linear;
border: 3px solid #f5f6fa;
}
.nav>ul>a>li:hover {
border: 3px solid #333;
}
#body {
padding-top: 35px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" align="center">
<div id="header">
<div class="logo">
<span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
</span>
</div>
<div class="nav">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Music</li>
</a>
<a href="#">
<li>Media</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div id="body"></div>
</div>

You are not able to set fixed hight for inline elements.
And you need to switch to display:inline-block or display:block to transform your elements into block elements.
Also please note, that some elements like <span> or <i> are inline by default, and some like <div> and <p> are block, but you are still able override that behavior (default) via CSS display rule.
In your case (I assume you would like to prevent jumping of your logo text, when ampersand changes font), I would suggest two things:
set fixed height to the .logo_text, you could add display:block and max-height: 84px;
set ampersand as span not as div to make your HTML markup more semantically relevant;