Develop Reference

Why does my page width only stretch to 100% with "fit-content"?

I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for

With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>

Toggle button takes two clicks

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;
}

How can I turn my navbar into Hamburger menu for mobile using responsive design?

How could I turn this navbar I made using CSS into Hamburger menu for mobile ? It needs to be responsive. I first tried using bootstrap but I'd like it to use CSS
Here's my codepen : https://codepen.io/Softee/pen/WNZpXGa
Thanks in advance for your help!
Here's the code :
header {
background: #583760;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
max-height: 90px;
margin-left: 60px;
float: left;
padding: 10px;
}
nav {
margin-right: 60px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 40px;
padding-top: 50px;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: black;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
<header>
<div class="container">
<img src="images/GameStar-Blanc.png" alt="logo" class="logo">
<nav>
<ul>
<li>A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
</ul>
</nav>
</header>

First of all, you will have to refactor the global CSS by using flex and grid which are the standard for responsive design. It is way more simple and powerful than using floats and other ancient stuff:
<header class="header">
<img src="..." />
<nav> ... </nav>
</header>
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 20px 60px;
}
With justify-content: space-between you tell the container that the elements inside of it (.logo and nav) will be spaced, the first (logo) at the left and the second (nav) at the right, no need to use float. The property works only if you set display: flex. With align-items: center; you tell the flex container how you want to vertically align your items.
Then, you can assign a class to ul and populate it as follows:
.list {
display: grid;
grid-auto-flow: column;
list-style-type: none;
column-gap: 20px;
padding: 0;
}
Here you're telling to <ul> element that all the <li> elements inside of it, should compose a grid of n columns as many <li> elements and that you want 20px of space between each of them. The property column-gap works only if you set display: grid. The padding should always be 0 or the browser will add some padding by default. You don't want it so you specify 0.
Now, you can use a powerful combo to set the width of the list items by creating a class and assigning it to your <li> elements:
.listItem {
width: min-content;
white-space: nowrap;
}
Here you're just telling to the list items that their width should be automatic, based on the words length. With white-space: nowrap you're telling to the list items that you never want the text to start a new line after a space. For example, "GUIDES ET ASTUCES" will always be placed on a single line. At the same time you're also setting the width for each column of the grid created before.
Now, create a button and wrap it together with the logo in a new div:
<div class="mobileHeader">
<img src="images/GameStar-Blanc.png" alt="logo" class="logo">
<button class="hamburger">Menu</button>
</div>
Basically, this will be your mobile header with the logo on the left and the button on the right. The menu will be placed below.
Create a global CSS rule and tell the button you never want to display it:
.hamburger {
display: none;
}
Now for the mobile menu, you should change the appearance of the <nav> container and all its child element that you want to change. From now on your code should be wrapped around a media query, place the media queries at the bottom of your CSS file or at least, below the rules defined before:
#media screen and (max-width: 800px) {
// CSS code
}
Create another CSS rule targeting all the devices with a max resolution of 800px:
#media screen and (max-width: 800px) {
.hamburger {
display: block;
}
}
In short, you just said: "The menu button should always be hidden, but when a device has a width from 0 to 800px, I want to display it.
Now create another rule inside the media query #media screen and (max-width: 800px) and do the same you did for the header:
.mobileHeader {
width: 100%;
display: flex;
justify-content: space-between;
}
Basically you want that a certain width, the header is something like:
Now you should have two elements inside your <header>, <div> and <nav>, let's create a rule and tell the header that you would like to display those elements one below the other:
.header {
flex-direction: column;
padding: 20px;
}
Basically it is just like grid-auto-flow: row for grids.
Now do the same for the list, this time you want the opposite, you want that all the items will compose a grid with n rows and just one column:
.list {
grid-auto-flow: row;
list-style-type: none;
row-gap: 40px;
column-gap: 0;
justify-items: center;
}
With justify-items: center you're instructing the list to center the list items. It works only with display: grid, since you set display: grid in a global rule, you don't need to write it again as long as you don't need to change it.
Now assign a class to your <nav> and enter another rule in the media query:
.menu {
display: none;
}
Since your menu should be hidden when an user visits the website on mobile, it should be set on display: none by default.
Now, set a rule to target only devices with a width of 801 px and more with (min-width: 801px):
#media screen and (min-width: 801px) {
.menu {
display: block !important;
}
}
No matter what, you always want the menu to be displayed for devices which have a resolution wider than 800px.
Now, if you shrink your window the mobile menu should be vanished and here you need a bit of JS to open and close it, I am not going into the details since your question is totally related to CSS and I will only confuse you by going deeper but you will find everything in the pen I made for you.
https://codepen.io/alienopolis/pen/NWapXWZ
Finally, I would recommend you to take this free tutorial which covers everything you need to know about responsive design with CSS:
https://www.freecodecamp.org/news/css-flexbox-and-grid-tutorial/
HTML
<header class="header">
<div class="mobileHeader">
<img src="images/GameStar-Blanc.png" alt="logo" class="logo">
<button onclick={openMenu()} class="hamburger">Menu</button>
</div>
<nav class="menu">
<ul class="list">
<li class="listItem">A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
</ul>
</nav>
</header>
CSS
body {
width: 90%;
height: 800px;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
background: #583760;
align-items: center;
padding: 20px 60px;
}
.logo {
color: white;
}
.list {
display: grid;
grid-auto-flow: column;
list-style-type: none;
column-gap: 40px;
}
.listItem {
width: min-content;
white-space: nowrap;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: black;
}
.hamburger {
display: none;
}
#media screen and (min-width: 801px) {
.menu {
display: block !important;
}
}
#media screen and (max-width: 800px) {
.header {
flex-direction: column;
padding: 20px;
}
.mobileHeader {
width: 100%;
display: flex;
justify-content: space-between;
}
.hamburger {
display: block;
}
.menu {
display: none;
}
.list {
grid-auto-flow: row;
list-style-type: none;
row-gap: 40px;
column-gap: 0;
justify-items: center;
}
}
JS
const menu = document.querySelector(".menu");
let open;
function openMenu() {
if (open) {
menu.style.display = "none";
open = false;
} else if (!open) {
menu.style.display = "block";
open = true;
}
}

Responsive means you'll use media queries.
If your current CSS represents the way you want the menu to look on the desktop, then you wrap that menu-related css within a media query, which matches whatever your definition of desktop is.
something like:
/* not-menu-related generic css here ... */
/* menu-related css that should be used on both desktop/mobile here ... */
#media screen and (min-width:240px) and (max-width:480px) {
/* all your current (desktop) menu-related css here */
}
After that, you can make a similar #media .... { ... } block for mobile, and add the relevant CSS in there that makes it look whatever way you prefer there.

threw this together using #media and display:block, display:none hope it helps
header {
background: #583760;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
max-height: 90px;
margin-left: 60px;
float: left;
padding: 10px;
}
nav {
margin-right: 60px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 40px;
padding-top: 50px;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: black;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
.hamburgerIcon {
display: none;
}
#media only screen and (max-width: 600px) {
.hamburgerIcon {
display: block;
}
.hamburgerIcon div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
nav a {
display: none;
}
}
<header>
<div class="container">
<img src="https://via.placeholder.com/60" alt="logo" class="logo">
<nav>
<ul>
<li>A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
<li>
<div class='hamburgerIcon'>
<div></div>
<div></div>
<div '></div>
</div>
</ul>
</nav>
</header>
also see w3schools.com/howto/howto_js_mobile_navbar.asp for further help building the nav if you need

Here's a solution with minimal JS.
You'll want to adjust your CSS for smaller screen sizes and use a media query for your larger screen sizes styles like, #media only screen and (min-width: 768px).
Then you'll want to add a click event to your nav to toggle an "open" class and style accordingly:
document.getElementById('navigation').onclick = () => {
document.body.classList.toggle('nav-open')
}
:root {
--header-height: 100px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: relative;
background: #583760;
height: var( --header-height);
}
header::after {
content: '';
display: table;
clear: both;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
height: 100%;
}
.container img {
height: 100%;
}
.hamburger {
color: white;
font-size: 36px;
user-select: none;
}
nav {
cursor: pointer;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
nav ul {
position: fixed;
top: 100px;
right: 0;
height: 100%;
width: 100%;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
margin: 0;
list-style: none;
background: #583760;
display: none;
}
nav ul li {
padding: 10px 0;
}
.nav-open nav ul {
display: flex;
}
#media only screen and (min-width: 768px) {
.logo {
max-height: 90px;
margin-left: 60px;
float: left;
padding: 10px;
}
.hamburger {
display: none;
}
nav {
margin-right: 60px;
float: right;
}
nav ul {
display: block;
padding: 0;
position: relative;
top: unset;
right: unset;
height: unset;
}
nav li {
display: inline-block;
margin-left: 40px;
}
nav a:hover {
color: black;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
}
<header>
<div class="container">
<img src="https://via.placeholder.com/150" alt="logo" class="logo">
<nav id="navigation">
<div class="hamburger">≡</div>
<ul id="navigationItems">
<li>A LA UNE </li>
<li>L'ACTUALITE</li>
<li>GUIDES ET ASTUCES</li>
<li>PROCHAINEMENT</li>
</ul>
</nav>
</header>

How I can make a underline text to be just a point?

I'm trying to make this component:
This is the component now :
Until now I succeeded to make with activeClassName the text to be colored blue when I'm on the right link. But I want also to have a point under the text every time I stay on that link ... I don;t know exact how to do that .
Below I will leave the code for you to understand what I did until now and what I suppose to do to make this work..
import { FC } from "react";
import { NavLink } from "react-router-dom";
// import observer from "mobx-react-lite"
import "./Navigation.css";
export const Navigation: FC = () => {
return (
<div className="nav">
<div className="logo">
<svg className="logo-image"></svg>
</div>
<div className="Center-links">
<ul className="pages">
<NavLink exact to="/" activeClassName="ceva" className="text">
<li className="row">Home</li>
</NavLink>
<NavLink to="/Bim" activeClassName="ceva" className="text">
<li className="row">Bim 2021</li>
</NavLink>
<NavLink to="/Regulations" activeClassName="ceva" className="text">
<li className="row">Regulations</li>
</NavLink>
<NavLink to="/History" activeClassName="ceva" className="text">
<li className="row">History</li>
</NavLink>
</ul>
</div>
<div className="Buttons-Right">
<h1>Button1</h1>
<h1>Button2</h1>
</div>
</div>
);
};
export default Navigation;
.logo-image {
mask: url("../assets/Images/logo.svg");
background-color: black;
width: 100px;
height: 65px;
margin: auto;
}
.nav {
height: 10vh;
width: 100%;
background: #6e68a7;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Center-links {
height: 100%;
width: 60%;
display: flex;
justify-content: space-around;
align-items: center;
}
.pages {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 50%;
}
.Buttons-Right {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.ceva {
color: #33c9d3;
}
.text {
text-decoration: none;
}
.row {
list-style: none;
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}

You can do something like this:
li.row.active{
position:relative;
}
li.row.active::before{
content: ' ';
z-index: 999;
position: absolute;
bottom: 0;
right:50%;
width:4px;
height:4px;
background-color: red;
border-radius: 999px;
}
ul {
list-style: none;
}
li {
display: inline;
padding:5px;
}
<ul>
<li class="row active">
test 1
<li>
<li class="row">
test 2
<li>
<ul>

Overflow X Hidden not working on Mobile devices for my Navbar

The overflow x in my react Navbar not working as expected. The navbar is meant to slide in only when the Hamburger is clicked and not to show when not clicked. Everything works well except the fact that the overflow X that was supposed to hide keeps scrolling. Have tried a few things but yet not working.
Here is the link to the CodeSandbox
My Navbar and my CSS code are here below. Kindly help me look into this.
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { MdMenu } from "react-icons/md";
// import { MdClose } from "react-icons/md";
export default function Navbar() {
const[navLinkOpen, navLinkToggle] = useState(false)
const handleNavLinksToggle = () =>{
navLinkToggle(!navLinkOpen)
}
const renderClasses = () =>{
let classes = "navlinks";
if(navLinkOpen){
classes += " active"
}
return classes;
}
return (
<div>
<div className="container">
<nav>
<div className="logo">
Edie
</div>
<ul className={renderClasses()}>
<li className="link"> Home </li>
<li className="link"> Services </li>
<li className="link"> Our Works </li>
<li className="link"> Clients </li>
<li className="link"> Contacts </li>
</ul>
<IconContext.Provider value={{ color: "#000000", size: "30px", className: "icon" }}>
<div onClick={handleNavLinksToggle} className="hamburger-toggle">
<MdMenu/>
</div>
</IconContext.Provider>
</nav>
</div>
</div>
)
}
CSS
#import url('https://fonts.googleapis.com/css2?family=Heebo&family=Poppins&display=swap');
nav{
display: flex;
justify-content: space-between;
align-items: center;
}
.navlinks{
display: flex;
justify-content: space-evenly;
width: 50%;
align-items: center;
}
.logo{
width: 70px;
height: 53px;
}
.logo > a{
font-family: 'Heebo', sans-serif;
text-decoration: none;
font-style: normal;
font-weight: 800;
font-size: 36px;
line-height: 53px;
color: #333333;
}
.navlinks > li > a{
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #333333;
}
.hamburger-toggle{
cursor: pointer;
display: none;
}
#media screen and (max-width: 1024px){
body{
overflow-x: hidden;
}
.hamburger-toggle{
display: block;
}
.navlinks{
display: none;
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 92vh;
align-items: center;
width: 100%;
top: 10vh;
background-color: red;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.active{
transform: translateX(0%);
}
}

For that you can use the position relative and additional width for html and body in global css.
It appears that browsers that parse the tag simply ignore overflow attributes on the html and body tags.
on Global CSS
html, body{
width: 100%;
position: relative;
}