We Keep Coding

Appending to section goes outside the section

Okay so basically I have a chat app I made and it appends a paragraph to the chat class which is inside a div which the class chat is a section but when I make enough messages it would put the messages outside the section as in like the background color would only show for a certain amount of messages then just be normal so like the height of it is broken for some reason and I can't figure out how to fix that.
$('.chat').append('<p id="' + Math.random() + '"><strong style=color:' +
data.color + '> ' + data.user + '</strong> <span style=color:"black">' +
data.message + '</span></p>');
* {
box-sizing: border-box;
transition: all .3s ease;
}
html {
background: #eee;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
main {
width: calc(100% - 20px);
max-width: 500px;
margin: 0 auto;
font-family: 'Mukta Malar', Arial;
/*font-family: Helvetica, Arial, Sans, sans-serif;*/
}
h1 {
margin: 0;
padding: 10px 0;
font-size: 32px;
}
.user-count {
font-size: 32px;
}
.chat {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: #ffffff;
opacity: 90%;
padding: 5px 10px;
/*this is for the msgs */
}
.adminTools {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: white;
opacity: 90%;
padding: 0px 20px;
}
.chat p {
margin: 0 0 5px 0;
}
input[type=color],
button {
/*input alonwas here too*/
width: 100%;
font: inherit;
background: #fff;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
button:hover {
cursor: pointer;
background: #ddd;
}
#media all and (min-width: 500px) {
.chat {
height: 300px;
/* height: calc(100vh - 140px);*/
}
input {
width: calc(100% - 160px);
}
button {
float: right;
width: 150px;
}
}
.scroller {
height: 500px;
overflow-y: scroll;
/* scroll-snap-type: y mandatory; */
}
.scroller section {
scroll-snap-align: start;
}
div {
overflow: auto;
}
#colorPicker {
width: 100%;
font: inherit;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
.adminTitle {
font-size: 25px;
}
.noscroll {
overflow: hidden !Important
}
input[type=color] {
width: 70px !important;
height: 70px !important;
border-radius: 100%;
overflow: hidden;
}
input[type=color]::-webkit-color-swatch {
border: solid;
border-radius: 100%;
padding: 50%;
border-color: white;
}
.userDiv {
position: fixed;
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
/*remove this if it breaks*/
body {
height: 100vh;
display: grid;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.inp {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
border-radius: 3px;
overflow: hidden;
}
.inp .label {
position: absolute;
top: 20px;
left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
transform-origin: 0 0;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
pointer-events: none;
}
.inp .focus-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
}
.inp input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border: 0;
padding: 16px 12px 0 12px;
height: 56px;
font-size: 16px;
font-weight: 400;
background: rgba(0, 0, 0, 0.02);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
color: #000;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.inp input:not(:-moz-placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
box-shadow: inset 0 -2px 0 #0077FF;
}
.inp input:focus+.label {
color: #0077FF;
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus+.label+.focus-bg {
transform: scaleX(1);
transition: all 0.1s ease;
}
.btn {
border: none;
border-radius: 5px;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
color: #fff;
background-color: #4c6e87;
box-shadow: 0 2px 8px -2px rgba(60, 83, 199, 0.5);
outline: none;
-webkit-tap-highlight-color: transparent;
transform: translateY(0);
}
.btn.ripple {
background-position: center;
transition: background 0.8s;
}
.btn.ripple:hover {
background: #3f5a6e radial-gradient(circle, transparent 1%, #3f5a6e 1%) 50%/16000%;
}
.btn.ripple:active {
background-color: #3f5a6e;
background-size: 100%;
transition: background 0s, transform 0.2s;
transform: translateY(1px);
}
<head>
<title>Msged</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main>
<header>
<center>
<h1 class="user-count">Online: 0</h1>
</center>
</header>
<!-- <article class="scroller"> -->
<div id="maindiv1">
<!-- style="height:400px;"> -->
<section class="chat"></section>
<!-- </article> -->
</div>
<form>
<label for="inp" class="inp">
<input type="text" placeholder="Message #main" />
<!-- <input type="text" style="border-radius: 25px; border: 1px inline black;" placeholder="Say something" /> -->
</label>
<!-- <input type="file" id="myFile" name="filename"> -->
<button class="btn ripple">Send</button>
</form>
</main>
<main>
<header>
<form>
<h1 id="colorPicker">
</h1>
<h1 id="userChecker">
</h1>
<!-- <button id="colorBtn">Change Colour</button> -->
</form>
</header>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/cookie_js#1.2.2/cookie.min.js"></script>
<script src="https://unpkg.com/socket.io-client#2/dist/socket.io.slim.js"></script>
</body>

Adding overflow: auto; to .chat in the css-file lets the section scroll and keep its background.

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash

For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

Button with hidden input

I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:

function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>

So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo

transition delete after i open the navbar. what happen?

I have a navbar opening div when i hover on it, it shows a tip(something like that) and when i hover on tip it will disappear.
the tip has got a transition But when i open and close the navbar the transition will deleted and when i hover on tip it wont disappear.
its the code:
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51, 51, 51, 0.726)";
document.getElementById("menu-icon-tip").style.opacity = "0";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51, 51, 51)";
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255, 255, 255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207, 207, 207);
}
<div class="navbar" id="navbar">
×
<div id="navbar-content" class="navbar-content">
Home
item2
item3
item4
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>
what can i do?
it is the video

you are overriding the transition.
use .active class and toggle this class
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51, 51, 51, 0.726)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.add('active');
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51, 51, 51)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.remove('active');
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip.active {
opacity: 1;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255, 255, 255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207, 207, 207);
}
<div class="navbar" id="navbar">
×
<div id="navbar-content" class="navbar-content">
Home
item2
item3
item4
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>

You are overriding your css transition with your javascript
You should remove any style modification you're applying on .menu-icon-tip
document.getElementById("menu-icon-tip").style.opacity = "0";
And
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
They're useless and are messing with your animations.

Make menu hamburger close when click on link and outside

I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.

You can use this part of code and also add any other logic you want.
$(document).click(function(e) {
var target = e.target;
if (
!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
Full code here
$(document).ready(function() {
$(".navbar-fostrap").click(function() {
$(".nav-fostrap").toggleClass("visible");
$("body").toggleClass("cover-bg");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
});
body {
background-color: red;
}
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
Hope it helps.