We Keep Coding

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

How styling and set good position of component RasaHQ/chatroom in angular application

I want use this component https://github.com/RasaHQ/chatroom with angular.I added .css and .js files. The component is available on page, but not look good. I want change position of component. Should I change something in css or in react component also?
index.html from angular
<body>
<div class="chat-container"></div>
<script src="assets/js/chatreact/Chatroom.js"></script>
<script type="text/javascript">
var chatroom = new window.Chatroom({
host: "http://localhost:5005",
title: "Financial Demo",
container: document.querySelector(".chat-container"),
welcomeMessage: "Hi, how may I help you?"
// speechRecognition: "en-US",
// voiceLang: "en-US"
});
chatroom.openChat();
</script>
<app-root></app-root>
</body>
Current position:
position
Expected position:
Expected position
.chatroom {
width: 300px;
height: 300px;
color: #343d4e;
/*max-height: 90vh;*/
background-color: rgba(200, 200, 200, 0.9);
border-radius: 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
letter-spacing: normal;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.chatroom * {
box-sizing: border-box; }
.chatroom.closed {
height: 40px; }
.chatroom h3 {
background-color: #343d4e;
color: #fff;
margin: 0;
height: 40px;
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; }
.chatroom .chats {
box-sizing: border-box;
padding: 20px;
margin: 0;
height: calc(100% - 80px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch; }
.chatroom .chats .chat {
background: rgba(255, 255, 255, 0.8);
position: relative;
padding: 5px 13px;
font-size: 14px;
border-radius: 10px;
list-style: none;
float: left;
clear: both;
margin: 10px 0 0 0;
max-width: 90%; }
.chatroom .chats .chat img {
max-width: 100%;
vertical-align: middle; }
.chatroom .chats .chat.left {
border-bottom-left-radius: 0; }
.chatroom .chats .chat.right {
float: right;
clear: both;
border-bottom-right-radius: 0; }
.chatroom .chats .chat .text {
word-wrap: break-word; }
.chatroom .chats .chat.chat-img {
padding: 5px; }
.chatroom .chats .chat a {
text-decoration: none;
color: #3498db; }
.chatroom .chats .chat ul,
.chatroom .chats .chat ol {
margin: 0;
padding-left: 1.5em; }
.chatroom .chats .chat ul li,
.chatroom .chats .chat ol li {
padding-left: 0; }
.chatroom .chats .chat.waiting {
margin: 10px 0;
background: transparent;
padding: 0; }
#keyframes fade {
from {
opacity: 1; }
to {
opacity: 0.3; } }
.chatroom .chats .chat.waiting span {
font-size: 1.5em;
animation-name: fade;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out; }
.chatroom .chats .chat.waiting span:nth-child(1) {
animation-delay: 0s; }
.chatroom .chats .chat.waiting span:nth-child(2) {
animation-delay: 0.4s; }
.chatroom .chats .chat.waiting span:nth-child(3) {
animation-delay: 0.8s; }
.chatroom .chats .time {
list-style: none;
clear: both;
height: 10px;
font-size: 10px;
color: #414141;
margin: 5px 0 20px 0; }
.chatroom .chats .time.left {
float: left; }
.chatroom .chats .time.right {
float: right; }
.chatroom .chats .chat-buttons {
position: relative;
padding: 0;
font-size: 14px;
list-style: none;
clear: both;
margin: 10px 0;
text-align: center; }
.chatroom .chats .chat-buttons .chat-button {
display: inline-block;
transition: all 0.3s ease;
cursor: pointer;
margin: 3px;
background-color: #343d4e;
color: white;
border: 2px solid white;
padding: 5px 10px;
letter-spacing: normal;
border-radius: 5px; }
.chatroom .chats .chat-buttons .chat-button:hover, .chatroom .chats .chat-buttons .chat-button.chat-button-selected {
background-color: rgba(52, 61, 78, 0.6);
color: white; }
.chatroom .chats .chat-buttons .chat-button.chat-button-disabled {
color: grey;
border: 2px solid grey; }
.chatroom .input {
height: 40px;
width: 100%;
margin: 0;
padding: 0 5px;
background-color: #343d4e;
display: flex;
flex-direction: row;
align-items: center; }
.chatroom .input input[type="text"] {
background-color: rgba(255, 255, 255, 0.8);
outline: 0;
border: 1px solid white;
border-right: none;
color: #343d4e;
padding: 0 5px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: 30px;
flex: 4;
box-sizing: border-box;
font-size: 14px;
transition: background-color 0.2s ease; }
.chatroom .input input[type="text"]:focus {
box-shadow: none;
background-color: white; }
.chatroom .input input[type="submit"] {
display: inline-block;
background: #343d4e;
border: 1px solid white;
color: white;
height: 30px;
min-width: 70px;
line-height: 1;
text-align: center;
padding: 0;
font-size: 12px;
flex: 1;
box-shadow: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
outline: none;
font-weight: 600;
text-transform: uppercase; }
.chatroom .input input[type="submit"]:hover {
background: rgba(255, 255, 255, 0.8); }
.chatroom #speech-input {
height: 30px;
width: 30px;
margin-left: 5px;
background: #343d4e;
border: 1px solid white;
color: white;
border-radius: 3px;
cursor: pointer;
transition: all 0.3s ease; }
.chatroom #speech-input:hover {
background: rgba(255, 255, 255, 0.8); }
.chatroom .vertical-center {
vertical-align: middle; }
/*# sourceMappingURL=/Chatroom.css.map */

Give your chat-container following style:
chat-container {
width: 360px;
z-index: 100;
box-shadow: 0 0 3em black;
position: fixed;
bottom: 10px;
right: 10px;
}
Set other properties such as width, height etc according to your choice.
Screenshot:
Live Example
Its Code Sandbox Link: Code Sandbox
PS: I am assuming chat-container is the one holding the chat-box.
Example:

Add CSS attribute on scroll function jQuery

I'm trying to create on scroll function, once the user scroll to certain point the menu add CSS background color attribute that appears.
But I'm having trouble, I believe I've used the correct scroll function usage, the syntax is also correct but the CSS() jQuery function doesn't goes to action as you can see in this codepen
How can I change CSS attribute once the user scrolling to certain point on the screen?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").css('background', 'blue');
} else {
$(".top-nav").css('background', 'transparent');
}
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width:1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width:1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: 'Rubik', sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1>
<a href="#" id="logo">
<span id="yd">yotam dahan</span>
<span class="logo-red">.</span>
<span id="com">COM</span>
</a>
</h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<a href="#!" id="burger-menu" onclick="toggleSideMenu()">
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</a>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>

The issue is because you've set overflow: scroll on the body element so the window isn't scrolling, the body is. As such the event handler is on the wrong element.
Also note that you should avoid putting CSS styling (as well as HTML) in your JS code. A better approach is using CSS classes. Then you can use toggleClass(). Try this:
jQuery($ => {
$('body').scroll(function () {
var scroll = $(this).scrollTop();
$('.top-nav').toggleClass('blue', scroll >= 100);
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav.blue {
background-color: blue;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width: 1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width: 1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: "Rubik", sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1><span id="yd">yotam dahan</span><span class="logo-red">.</span><span id="com">COM</span></h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>

More padding was added on logo jquery

I was trying to perfect my jQuery submenu but I stumble w/ some CSS issues.
Here are my questions:
How can I fix the issue when I re-open the navigation again it adds more padding on the bottom than it was opened for the first time?
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}

try this:
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 18px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
padding-bottom:0;
margin:0;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
/* height: 136px; */
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
demo:

I modified the margins as some elements have some inncorrect margins and I made some modifications to the transitions as well, also I modified the navigation's width as it starts as 250px and become 280px after collapsing and expanding again.
just try this, hope it helps :)
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 250px;
}
.content.sidebar-collapsed .logo {
box-sizing: border-box;
transition: all 200ms;
overflow:auto;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
margin:0;
box-sizing: border-box;
}
.content.sidebar-collapsed #logo {
opacity: 0;
display:none;
transition: all 200ms;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
display:inline-block;
transition-delay:500ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 200ms;
}
.content.sidebar-collapsed-back #nav .fa-plus {
opacity: 0;
transition: all 200ms;
}
.content.sidebar-collapsed-back #nav .fa-plus {
opacity: 1;
transition-delay:500ms;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition:all 200ms;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
transition:all 200ms;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none;
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
height:34px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition:all 200ms;
}

Ensure that the height property of .logo is set to the same value when .content is both with and without the .sidebar-collapsed class.
The padding property of .logo is too large; there is barely any room left for the hamburger.
It seems you are only using padding to center the other menu icons. Consider another tactic - there are plenty of better ways to do it.
https://css-tricks.com/centering-css-complete-guide/#center-horizontally
http://howtocenterincss.com/

Select Box squished and elongated in Firefox

Here's the jsfiddle for the rest of the code but I attached my style css below
In Chrome they look like this
In Internet Explorer they look like this
And in Firefox they look like this
Not exactly sure what the issue is and how to fix it
And here is my style css
html {
height: 100%;
}
* {
margin: 0;
padding: 5;
}
body {
font: normal .80em'trebuchet ms', arial, sans-serif;
background: #F5F5EE;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #362C20;
letter-spacing: 0em;
padding: 0 0 5px 0;
}
h1, h2, h3 {
font: normal 170%'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #009FBC;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #009FBC;
padding: 0 0 5px 0;
font: normal 110% arial;
text-transform: uppercase;
}
h5, h6 {
color: #888;
font: normal 95% arial;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #AEB002;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#header {
background: #323534 url(back.png) repeat-x;
height: 177px;
}
#logo {
width: 880px;
position: relative;
height: 140px;
background: transparent;
}
#logo #logo_text {
position: absolute;
top: 10px;
left: 0;
}
#logo h1, #logo h2 {
font: normal 300%'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0 0 0 9px;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;
}
#logo_text h1 a .logo_colour {
color: #E4EC04;
}
#logo_text a:hover .logo_colour {
color: #FFF;
}
#logo_text h2 {
font-size: 120%;
padding: 4px 0 0 0;
color: #999;
}
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100%'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
#site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 10px 0;
}
#sidebar_container {
float: right;
width: 224px;
}
.sidebar_top {
width: 222px;
height: 14px;
background: transparent url(side_top.png) no-repeat;
}
.sidebar_base {
width: 222px;
height: 14px;
background: url(side_base.png) no-repeat;
}
.sidebar {
float: right;
width: 222px;
padding: 0;
margin: 0 0 16px 0;
}
.sidebar_item {
background: url(side_back.png) repeat-y;
padding: 0 15px;
width: 192px;
}
.sidebar li a.selected {
color: #444;
}
.sidebar ul {
margin: 0;
}
#content {
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
#content ul {
margin: 2px 0 22px 0px;
}
#content ul li, .sidebar ul li {
list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 25px;
line-height: 1.5em;
}
#footer {
width: 100%;
font-family:'trebuchet ms', sans-serif;
font-size: 100%;
height: 80px;
padding: 28px 0 5px 0;
text-align: center;
background: #3B3939 url(footer.png) repeat-x;
color: #A8AA94;
}
#footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
}
#footer a {
color: #A8AA94;
text-decoration: none;
}
#footer a:hover {
color: #FFF;
text-decoration: none;
}
.search {
color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input {
padding: 5px;
width: 225px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;
}
.form_settings .submit:hover {
background: #00CAEE;
color: #E4EC04;
}
.form_settings .submit {
font: 100% arial;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #3B3B3B;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.important-btn:hover {
background: #8C1717;
}
.important-btn {
font: 100% arial;
border: 0;
width: 200px;
margin: 5px 0px 5px 215px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.regularbutton:hover {
background: #00CAEE;
color: #E4EC04;
}
.regularbutton {
font: 100% arial;
border: 0;
width: 200px;
margin: 0px 0px 0px 212px;
height: 25px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.whattoput:hover {
background: #00CAEE;
color: #E4EC04;
}
.whattoput {
font: 100% arial;
border: 0;
width: 100px;
margin: 0px 0px 0px 5px;
height: 25px;
padding: 0px 0 0px 0px;
cursor: pointer;
background: #52514F;
color: #FFF;
-o-transition:color .2s ease-out, background .5s ease-in;
-ms-transition:color .2s ease-out, background .5s ease-in;
-moz-transition:color .2s ease-out, background .5s ease-in;
-webkit-transition:color .2s ease-out, background .5s ease-in;
/* ...and now for the proper property */
transition:color .2s ease-out, background .5s ease-in;
}
.form_settings option {
font: 100% arial;
border: 0;
width: 10px;
margin: 5px 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #52514F;
color: #FFF;
}
.form_settings select {
font: 100% arial;
margin: 0px 0px 0px 5px;
width: 140px;
}
.form_settings textarea {
font: 100% arial;
width: 225px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #3B3B3B;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #E5E5DB;
color: #47433F;
border-top: 1px solid #FFF;
}
.hideother {
display: none;
}
#banner {
width: 100%;
background: orange;
height: 25px;
position: fixed;
top: 0;
display: none;
left: 0;
text-align: center;
line-height: 25px;
font-weight: bold;
color:#4F0002;
}

.form_settings option {
...
width: 10px;
...
}
is your culprit.
Chrome and IE don't honor most option styling (dag blast them), so it renders as the browser intends it to, but Firefox (it would seem) lets you mess it up all you want. And you have definitely messed it up with the width: 10px;. I would just recommend losing all of your option styles, but that's just my opinion.