I am currently working on a website with a fixed top navbar. The website navbar looked like this:
I was asked to place the logo of the site next to the side menu toggle item (those three stacked dashes to the left.
I did so by changing this code snippet:
<header class="header" id="header">
<div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
<div id="nav-buttons" class="me-5 d-sm-block">
<button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
<button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
</div>
</header>
to this:
<header class="header" id="header">
<div class="d-inline">
<div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
<img class="w-5 h-auto" src="./img/Logo Vegaz Bet MOEDA.png" alt="">
</div>
<div id="nav-buttons" class="me-5 d-sm-block">
<button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
<button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
</div>
</header>
Yet, after doint it, all elements in the top bar started to stack and I can’t figure out why…
Can anyone help me understand why this is happening and how to fix it? Here is my full code (custom.css is the bootstrap library)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="./css/custom.css" rel="stylesheet">
<link href="./css/navlayout.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script defer src="./js/navlayout.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
<link rel="icon" href="./img/icon.png" />
<title>Vegaz.bet</title>
</head>
<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
<header class="top-header align-middle">
<div class="mx-auto"></div>
</header>
<header class="header" id="header">
<div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
<div id="nav-buttons" class="me-5 d-sm-block">
<button type="button" class="white-bs-color fw-bold btn btn-primary me-4" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
<button type="button" class="white-bs-color fw-bold btn btn-secondary" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
</div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<div class="nav_list">
<a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>
<a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
<a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
<a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>
<hr class="bg-white border-2 border-top border-white">
<a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon white-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>
<a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon white-bs-color"></i> <span class="nav_name">Help</span> </a>
</div>
</div>
</nav>
</div>
<div class="r-navbar invisible" id="nav-bar-chat">
<div id="invisible-toggle-div" class="container pb-5 invisible">
<div class="row h-20 mb-1">
<button id="close-chat" type="button" class="position-absolute top-8 start-10 btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="w-50 position-absolute top-7 end-10 white-bs-color fw-bold btn btn-primary"><span class="text-nowrap">Vegaz Chat</span></button>
</div>
<div class="row h-60">
<div id="chatContainer" class="chat-font d-flex flex-column bd-highlight position-absolute top-15 end-5 w-90 h-75">
<span class="time-span-chat ms-2">11:29</span>
<div class="card bg-field-grey text-white mb-1">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> oi putões</span>
</div>
<span class="time-span-chat ms-2">11:29</span>
<div class="card bg-field-grey text-white mb-1">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: yellow">youranus420:</span> bora crash?</span>
</div>
<span class="time-span-chat ms-2">11:30</span>
<div class="card bg-field-grey text-white mb-1">
<span class="pt-1 pb-1 ps-1 pe-1"><span class="fw-bold" style="color: purple">elon musk:</span> Olha o nome do cara kkkkk</span>
</div>
</div>
</div>
<div class="row h-10">
<div class="bg-primary text-center position-absolute end-3 bottom-6 w-94 h-5">
<div class="input-group mb-3">
<input type="text" class="chat-font form-control" placeholder="Your message" aria-label="Message">
<button class="chat-font btn btn-outline-secondary" type="button" id="button-addon2">Send</button>
</div>
</div>
</div>
</div>
</div>
<!--Container Main start-->
<div class="height-100">
<h4>Main Components</h4>
<a class="position-absolute bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
<span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
</a>
</div>
<!--Container Main end-->
<!-- Login modal -->
<div class="modal fade modal-fullscreen-sm-down" id="login-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog bg-primary">
<div class="bg-primary text-white border border-4 border-secondary modal-content">
<div class="border-bottom border-4 border-secondary modal-header">
<div class="mx-auto">
<button type="button" class="white-bs-color fw-bold btn btn-primary">Login</button>
<button type="button" class="white-bs-color fw-bold opacity-50 btn btn-primary" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#registration-modal">Register</button>
</div>
<button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-column bd-highlight">
<div class="text-center p-2 bd-highlight">
<img src="" alt="Logo Vegaz">
</div>
<div class="text-center fw-bold p-2 bd-highlight">
Login to Vegaz
</div>
<div class="text-center p-2 bd-highlight">
<input class="bg-field-grey text-white border-0 form-control mb-3" type="text" placeholder="Username or Email" id="login-username" aria-label="Username">
<input class="bg-field-grey text-white border-0 form-control mb-3" type="password" placeholder="Password" id="login-password" aria-label="Password">
</div>
<div class="text-center p-2 bd-highlight">
<button type="button" class="white-bs-color btn btn-primary" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#recover-modal">Forgot your password?</button>
</div>
</div>
</div>
<div class="border-top border-4 border-secondary modal-footer">
<button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal">Login</button>
</div>
</div>
</div>
</div>
<!-- Recover password modal -->
<div class="modal fade modal-fullscreen-sm-down" id="recover-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog bg-primary">
<div class="bg-primary text-white border border-4 border-secondary modal-content">
<div class="border-bottom border-4 border-secondary modal-header">
<div class="mx-auto">
<button type="button" class="white-bs-color fw-bold btn btn-primary">Recover your password</button>
</div>
<button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="text-center p-2 bd-highlight">
<img src="" alt="Logo Vegaz">
</div>
<div class="text-center fw-bold p-2 bd-highlight">
We'll send you an email with instructions to recover your account
</div>
<div class="text-center p-2 bd-highlight">
<input class="bg-field-grey text-white border-0 form-control mb-3" type="email" placeholder="Email" id="recover-email" >
</div>
</div>
</div>
<div class="border-top border-4 border-secondary modal-footer">
<button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#recover-confirmation-modal">Recover password</button>
</div>
</div>
</div>
</div>
<!-- Recover password confirmation modal -->
<div class="modal fade modal-fullscreen-sm-down" id="recover-confirmation-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog bg-primary">
<div class="bg-primary text-white border border-4 border-secondary modal-content">
<div class="border-bottom border-4 border-secondary modal-header">
<div class="mx-auto text-center fw-bold">
Recover your password
</div>
<button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="text-center p-2 bd-highlight">
<img src="" alt="Logo Vegaz">
</div>
<div class="text-center p-2 bd-highlight">
You'll receive an email shortly with instructions to recover your password. Check your inbox!
</div>
</div>
</div>
<div class="border-top border-4 border-secondary modal-footer">
<button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal">Understood</button>
</div>
</div>
</div>
</div>
<!-- Registration modal -->
<div class="modal fade modal-fullscreen-sm-down" id="registration-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog bg-primary">
<div class="bg-primary text-white border border-4 border-secondary modal-content">
<div class="border-bottom border-4 border-secondary modal-header">
<div class="mx-auto">
<button type="button" class="white-bs-color fw-bold opacity-50 btn btn-primary" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
<button type="button" class="white-bs-color fw-bold btn btn-primary">Register</button>
</div>
<button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="text-center p-2 bd-highlight">
<img src="" alt="Logo Vegaz">
</div>
<div class="text-center fw-bold p-2 bd-highlight">
Create your Vegaz account
</div>
<div class="text-center p-2 bd-highlight">
<input class="bg-field-grey text-white border-0 form-control mb-3" type="email" placeholder="Email" id="register-email" >
<input class="bg-field-grey text-white border-0 form-control mb-3" type="text" placeholder="Username" id="register-username" aria-label="Username">
<input class="bg-field-grey text-white border-0 form-control mb-3" type="password" placeholder="Password" id="register-password" aria-label="Password">
<input class="bg-field-grey text-white border-0 form-control mb-3" type="password" placeholder="Password repeat" id="register-password-repeat" aria-label="Password repeat">
</div>
</div>
</div>
<div class="border-top border-4 border-secondary modal-footer">
<button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#registration-confirmation-modal">Register</button>
</div>
</div>
</div>
</div>
<!-- Registration confirmation modal -->
<div class="modal fade modal-fullscreen-sm-down" id="registration-confirmation-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog bg-primary">
<div class="bg-primary text-white border border-4 border-secondary modal-content">
<div class="border-bottom border-4 border-secondary modal-header">
<div class="mx-auto text-center fw-bold">
Welcome to Vegaz
</div>
<button type="button" class="position-absolute end-5 btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="text-center p-2 bd-highlight">
<img src="" alt="Logo Vegaz">
</div>
<div class="text-center p-2 bd-highlight">
You're now part of the best online gaming casino community!
Let's play and good luck!
</div>
</div>
</div>
<div class="border-top border-4 border-secondary modal-footer">
<button type="button" class="mx-auto btn btn-secondary" data-bs-dismiss="modal">Start playing!</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
--top-header-top-position: 5%;
--header-height: 3rem;
--nav-width: 68px;
--chat-width: 100px;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--white-color: var(--bs-white);
--body-font: 'Montserrat', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 100;
--z-topbar: 101;
}
*,
::before,
::after {
box-sizing: border-box
}
.top-header {
width: 100%;
height: var(--top-header-top-position);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--secondary-color);
z-index: var(--z-topbar);
transition: .5s;
text-align: center !important;
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--top-header-top-position);
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--primary-color);
z-index: var(--z-fixed);
transition: .5s
}
.header_toggle {
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--primary-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed)
}
.r-navbar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: var(--primary-color);
padding: 1rem 0 0 1rem;
transition: .5s;
z-index: var(--z-fixed);
padding: 1rem 0 0 1rem;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-top: 5rem;
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
text-decoration: none;
}
.nav_logo {
margin-bottom: 2rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link {
position: relative;
color: var(--white-color);
margin-bottom: 1.5rem;
transition: .3s
}
.nav_link:hover {
color: var(--white-color)
}
.nav_icon {
font-size: 1.25rem;
}
.secondary-bs-color {
color: var(--bs-secondary)
}
.white-bs-color {
color: var(--white-color)
}
.show-left-nav {
left: 0;
width: calc(var(--nav-width) + 156px);
}
.show-right-nav {
width: 100%;
}
.body-menu-pd {
padding-left: calc(var(--nav-width) + 188px);
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 1rem);
}
.chat-font {
font-size: small;
}
.time-span-chat {
font-size: smaller;
color: var(--white-color);
}
#chatContainer {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#chatContainer::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.active {
color: var(--white-color)
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color)
}
.height-100 {
height: 100vh
}
.float-icon-chat {
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: var(--secondary-color);
color: var(--white-color);
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
@media screen and (min-width: 768px) {
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.r-navbar {
right: 0;
padding: 1rem 0 0 1rem;
width: 0;
}
.show-left-nav {
width: calc(var(--nav-width) + 156px)
}
.show-right-nav {
width: calc(var(--chat-width) + 156px)
}
.body-menu-pd {
padding-left: calc(var(--nav-width) + 188px);
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 156px)
}
}
JS:
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId),
toggleup = document.getElementById("toggle-up")
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
toggleup.addEventListener('click', () => {
// show navbar
nav.classList.toggle('show-left-nav');
//hide navbar buttons on sm
document.getElementById("nav-buttons").classList.toggle('d-none');
// change icon
toggle.classList.toggle('fa-times');
// add padding to body
bodypd.classList.toggle('body-menu-pd');
// add padding to header
headerpd.classList.toggle('body-menu-pd');
});
}
}
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header');
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link');
function colorLink() {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'));
this.classList.add('active');
}
}
linkColor.forEach(l => l.addEventListener('click', colorLink));
// show chat
const showChat = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId),
closeChat = document.getElementById("close-chat")
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
const toggleFunc = () => {
// show navbar
document.getElementById("invisible-toggle-div").classList.toggle('invisible');
nav.classList.toggle('invisible');
nav.classList.toggle('show-right-nav');
// change icon
toggle.classList.toggle('invisible');
// add padding to body
bodypd.classList.toggle('body-chat-pd');
// add padding to header
headerpd.classList.toggle('body-chat-pd');
}
toggle.addEventListener('click', toggleFunc);
closeChat.addEventListener('click', toggleFunc);
}
}
showChat('chatButton', 'nav-bar-chat', 'body-pd', 'header');
});