This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!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">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);
Related
The dropdown menu which is supposed to close when clicking outside of the menu button is not working. I have had this problem before but the problem re-occurred and can't get to a solution. Help would be appreciated. I am not sure as to why the code doesn't work, so some clarification would be helpful.
let btnn = document.getElementById("btn");
btnn.addEventListener('click', function() {
let dropdown = document.getElementById('dropdown');
dropdown.classList.toggle("visible");
})
window.onclick = function(event){
if (!event.target.matches('#btn')) {
let dropd = document.getElementById('dropdown');
dropd.classList.remove("visible");
}
}
body {
height: 100vh;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.logo {
display: block;
text-align: left;
background: red;
height: 10vh;
}
.logo #logo {
display: inline;
line-height: 10vh;
font-size: 3em;
margin-left: 0.8em;
}
button#btn {
display: inline;
float: right;
margin-right: 2em;
margin-top: 0;
margin-bottom: 0;
border: none;
background-color: red;
padding: 0;
}
nav {
display: block;
background-color: black;
width: 100vw;
}
nav ul {
display: none;
list-style-type: none;
margin: 0;
padding-left: 0;
}
nav ul li {
text-align: center;
}
.link {
display: block;
color: white;
font-size: 2.4em;
background-color: blue;
text-decoration: none;
width: 100vw;
height: 7vh;
line-height: 7vh;
border-bottom: 2px solid black;
text-align: center;
}
.visible {
display: block;
}
.fa-bars:before, .fa-navicon:before {
content: "\f0c9";
font-size: 50px;
line-height: 10vh;
}
#media only screen and (min-width: 480px) {
.fa-bars:before, .fa-navicon:before {
font-size: 35px;
}
/* #dropdown {
display: block;
} */
}
#media only screen and (min-width: 600px) {
.fa-bars:before, .fa-navicon:before {
font-size: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="logo">
<p id="logo">Logo</p>
<button id="btn"><i class="fa-solid fa-bars"></i></button>
</div>
<nav>
<ul id="dropdown">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
let me restructure your javascript better. It will solve your problem and the code is precise too I think.
document.querySelector("body").addEventListener("click", function(event){
let dropd = document.querySelector('#dropdown');
if (!event.target.parentNode.matches('#btn')) {
dropd.classList.remove("visible");
} else {
dropd.classList.toggle("visible");
}
});
In your previous code, I believe your button click was overridden by the window click. Here, I'm clicking on the body and simply matching the button id. If it matches, then I'm doing the toggle and otherwise, I'm removing the class.
*** I've used parentNode. If you're wondering why I'd used that you can just simply console log to see where the button click happens. You will see that the click is getting the icon inside the button. That is why I took the icon parent to check if the click is happening where I want it.
You can use document.body.addEventListener('click', fn, true);. Your js file should be like this maybe
let btnn = document.getElementById("btn");
btnn.addEventListener('click', function() {
let dropdown = document.getElementById('dropdown');
dropdown.classList.toggle("visible");
})
document.body.addEventListener("click", () => {
let dropd = document.getElementById('dropdown');
dropd.classList.remove("visible");
}, true);
I have made a toggle button to show some navlinks on mobile screens.
However on the first page load it takes two clicks.
After that point it toggle perfectly fine.
How can I make it so it functions correctly first time?
Heres the script that contains the function.
script.js
function ToggleNavLinks() { /
var navLink = document.getElementsByClassName("nav-links")[0];
if (navLink.style.display === "none") {
navLink.style.display = "flex";
}
else {
navLink.style.display = "none";
}
}
Heres the layout file that contains the front-end element.
I have tested if it was the external script reference and it definitely works.
layout.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<meta charset="utf-8"/> <!-- Charset -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script type="text/javascript" src="/javascripts/script.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<img class="logo" alt="logo" src="images/logo-stock.png">
<a class="nav-toggle" onclick="ToggleNavLinks()" >
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!-- Links used in the navbar -->
<div class="nav-links">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
</header>
<div>
{{{body}}}
</div>
</body>
</html>
Ill also include the stylesheet in case that has anything to do with it.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
:root {
font-size: 16px;
font-family: 'Roboto', sans-serif;
--text-primary: white;
--text-secondary: #4c6bc1;
--bg-primary: #101316;
--bg-secondary: #181a1d;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--bg-primary);
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #181a1d;
}
body::-webkit-scrollbar-thumb {
background: #4c6bc1;
}
.navbar {
justify-content: space-between;
position: relative;
background-color: var(--bg-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar img {
width: 250px;
height: 100px;
}
.logo{
max-width: 100%;
height: auto;
}
.navbar-links {
height: 100%;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
font-size: 1.5rem;
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
.nav-links li a:hover {
color: #4c6bc1;
}
.nav-toggle {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
}
.nav-toggle:hover {
cursor: pointer;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links ul {
width: 100%;
flex-direction: column;
}
.nav-links li {
text-align: center;
}
.nav-links.active {
display: flex;
}
element.style.display === 'none'
is true when the element has an inline style attribute, which includes display: none. Note that this is true regardless of the actual computed style property of the element. You can check it in this example:
console.log(document.querySelector('.test').style.display);
.test {
display: block !important;
}
code {
background-color: #eee;
}
<div style="display: none;" class="test">I haz <code>style.display === 'none'</code>. You are looking at me. Stop staring, it's not nice.</div>
To check the computed property of the display, use
window.getComputedStyle(element).display === 'none'
In conclusion, replace
if (navLink.style.display === "none") {
with
if (window.getComputedStyle(navLink).display === "none") {
It maybe not the problem of Your Javascript. First check your CSS file. Check if the order of your code i.e display tag is already none or flex. Then only it was not working at 1st instance.
It may be like that:
.navlink{
display: none;
}
Change it to :
.navlink{
display: flex;
}
I am creating a navbar using flex CSS. My problem is that I wanted the links to be on the right side of the screen, but they are on the left side and next to the title which is what I do not want. I have tried margin-left: auto, but it does not work. Is there a different solution to this problem? The image down below:
Image of Navbar
Here's my codes:
#import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/*
font-family: 'Poppins', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
*/
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
}
nav {
padding: 20px;
display: flex;
justify-content: space-between;
position: fixed;
align-content: center;
background-color: transparent;
}
.name-title {
font-family: "Montserrat Alternates", sans-serif;
font-size: xx-large;
color: #000;
}
nav ul {
display: flex;
justify-content: space-between;
align-content: center;
margin-top: 10px;
}
nav li {
list-style: none;
}
nav a {
font-family: "Poppins", sans-serif;
font-size: medium;
padding-right: 2em;
text-decoration: none;
color: #000;
}
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="name-title">Ayush Kumar</div>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Just add width: 100%; to Nav
nav {
padding: 20px;
display: flex;
justify-content: space-between;
position: fixed;
align-content: center;
background-color: transparent;
width: 100%;
}
or remove position fixed
position: fixed; is causing the issue. If you really want to use it, add some more details describing the position.
nav {
position: fixed;
left: 0;
right: 0;
}
The above will give it a width of 100% since the position is 0 distance from both left and right end of the viewport. Codepen
Otherwise you can remove position:fixed too.
My Solution to your Question, I hope I can help.
<style>
.main-nav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navbar {
display: flex;
flex-direction: row;
list-style: none;
}
.navbar li {
padding-right: 5px;
}
</style>
<body>
<nav class="main-nav">
<h1>Name</h1>
<ul class="navbar">
<li>
link A
</li>
<li>
link B
</li>
<li>
link C
</li>
</ul>
</nav>
</body>
Try Wrapping your nav tag in a body tag in your html. You set the body width to 100% but theres no body tag in your HTML.
Whenever I click on the hamburger icon the menu opens but when I click on it again it is supposed to get closed... But it's not. I am trying to debug but I have no idea what is going wrong. If anyone knows, please help
// Hamberger menu
const navSearch = document.querySelector('.nav-search');
const navLeft = document.querySelector('.nav-left');
document.querySelector('.toggle').addEventListener('click', () => {
console.log(navSearch.style.display);
console.log('1');
if(navSearch.style.display = "none") {
console.log('2');
navSearch.style.display = "inline-block";
navLeft.style.display = "inline-block";
console.log(navSearch.style.display);
} else if(navSearch.style.display = "inline-block") {
console.log('3');
navSearch.style.display = "none";
navLeft.style.display = "none";
}
console.log('......');
});
// Variables
$website-width: 1280px;
$color-main: #4bbf73;
$color-dark: #343a40;
$color-light: #fff;
$color-lightx2: #f7f7f9;
//General Styles
* {
margin: 0;
padding: 0;
}
body {
background-color: $color-light;
font-family: "Nunito", Arial, Helvetica, sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $color-light;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
input {
border: none;
padding: 0.7rem 1rem;
background: $color-lightx2;
&:focus {
outline: none;
}
}
// Utilities
.container {
max-width: $website-width;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
// navbar
header {
background: $color-dark;
height: 100px;
#navbar {
padding-top: 1.3rem;
color: $color-light;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.nav-logo {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 2px;
padding: 0.5rem 1rem;
}
ul {
display: flex;
justify-content: center;
li {
padding-left: 1.5rem;
}
}
input[type="submit"] {
margin-left: 0.4rem;
background-color: inherit;
border: $color-main 2px solid;
color: $color-main;
&:hover {
background-color: $color-main;
color: $color-light;
transition: all 0.2s ease-in-out;
}
}
input[type="text"] {
padding: 0.7rem 1rem;
}
}
.toggle {
position: absolute;
top: 2.2rem;
right: 6rem;
transform: scale(2);
display: none;
}
}
#import 'media';
#media (max-width: 850px) {
header {
height: auto;
#navbar {
flex-direction: column;
align-items: start;
input[type="text"] {
margin: 1rem 0 1.4rem 3rem;
}
ul {
padding-bottom: 1rem;
}
}
.toggle {
display: inline-block;
}
.nav-search,
.nav-left {
display: none;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="scss/style.css">
<title>AllMart</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div class="nav-logo">
AllMart
</div>
<div class="nav-search">
<form>
<input type="text" placeholder="Search Product...">
<input type="submit" value="SEARCH">
</form>
</div>
<div class="nav-left">
<ul>
<li id="cart"><i class="fas fa-shopping-cart"></i> CART</li>
<li id="profile"><i class="fas fa-user"></i> SIGN IN</li>
</ul>
</div>
</nav>
<span class="toggle"><i class="fas fa-bars"></i></span>
</div>
</header>
<script src="js/index.js"></script>
</body>
</html>
and this is the output I get whenever I click on the icon
I have no idea what is going wrong if anyone knows, please help
You need to use === or == in if statements, not =, which is the assignment operator. === is preferred because it tests for strict equality (no type conversion).
if(navSearch.style.display === "none")
else if(navSearch.style.display === "inline-block") {
I am working on a menu, and I am trying to add a class to the li when I clik on it, but I need to remove the class to the other li elements when I click on one of them, I have tried this clicked.classList.remove("active"); but doesnt work, every element I click on get the class and is not possible to remove it, How coud I do this correctly.
Thanks for your help
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
clicked.classList.remove("active");
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>
I modified your js code a bit. Let's do another loop in your click event listener, to uncheck the "active" class to every menu option.
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
// modified in here
// clicked.classList.remove("active");
menu_link = document.querySelectorAll(".menu_option");
for (i = 0; i < menu_link.length; i++) {
menu_link[i].classList.remove("active");
}
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>
I hope this is what you're looking for? if so you can tweak existing code based on this.
you can replace button with li that won't be an issue.
var btnContainer = document.getElementById("myDIV");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
background-color: #666;
color: white;
}
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
I think this is what you want:
var menu_link = document.querySelectorAll(".menu_option");
for(i=0; i<menu_link.length; i++){
var clicked = menu_link[i]
clicked.addEventListener("click", function(){
var active = document.querySelector('.menu_option.active');
if(active) {
active.classList.remove("active");
}
this.classList.add("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.container {
max-width: 900px;
margin: auto;
}
/*============================================================================
HEADER
===============================================================================*/
header {
background-color: #ffda00;
padding-top: 10px;
padding-bottom: 10px;
}
header nav {
display: flex;
align-items: center;
justify-content: space-between;
}
header nav ul li {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
header .logo {
font-size: 2rem;
}
header nav ul li a {
font-size: 1.1rem;
}
/* active menu */
.active {
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons#0.1.2/css/themify-icons.css">
<title>My Store</title>
</head>
<body>
<header>
<div class="container">
<nav>
<span class="logo"><i class="ti-home"></i></span>
<ul>
<li class="menu_option">Users</li>
<li class="menu_option">Orders</li>
<li class="menu_option">Products</li>
<li class="menu_option">Exit</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>