I successfully completed this task on my own by utilizing Mediaquery to determine the maximum width of the navigation bar (including both logo and menu). As an added bonus, I included jQuery within a script tag to change the menu icon to a close icon when it is opened.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="..\Css\style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-bar">
<span>
<ion-icon name="call" clasa="call"></ion-icon>
123 456 789
</span>
<ul>
<li><a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a></li>
<li><a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a></li>
<li><a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a></li>
</ul>
</div>
<nav>
<div class="logo">
<a href="#"><img src="..\Images\logo.png" alt="logo">MoviesHub</a>
</div>
<div class="toggle">
<a href="#">
<ion-icon name='menu'></ion-icon>
</a>
</div>
<ul class="menu">
<li><a href="#" class="select">Home</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$(".toggle").on("click", function() {
if ($(".menu").hasClass("active")) {
$(".menu").removeClass("active");
$(this).find("a").html("<ion-icon name='menu'></ion-icon>");
} else {
$(".menu").addClass("active");
$(this).find("a").html("<ion-icon name='close'></ion-icon>");
}
});
});
</script>
<script type="module" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d242223242e22233e0d786378637f">[email protected]</a>/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa3a5a4a3a9a5a4b98affe4ffe4f8">[email protected]</a>/dist/ionicons/ionicons.js"></script>
</body>
</html>
Css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a,
a:hover {
text-decoration: none;
}
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 25px;
background: rgba(32, 51, 71, 1);
}
.top-bar span {
color: white;
font-weight: 400;
font-size: 12px;
}
.call ion-icon {
position: relative;
top: 20px;
}
.top-bar ul {
list-style: none;
display: flex;
}
.top-bar li {
margin: 0px 10px;
}
.top-bar a {
color: white;
font-size: 15px;
}
.top-bar a:hover {
color: rgba(2, 13, 24, 1)
}
nav {
background: rgba(2, 13, 24, 1);
padding: 15px 20px;
display: flex;
align-items: center;
box-shadow: 0 1 25px 0 rgba(2, 13, 24, 1);
}
.logo img {
width: 40px;
margin-right: 10px;
}
nav a {
color: white;
}
.menu a.select{
color: rgba(213, 255, 0, 1);;
}
nav a:hover {
color: rgba(213, 255, 0, 1);
}
.logo {
flex: 1;
}
.logo a {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
}
.logo a:hover {
color: rgba(213, 255, 0, 1);
}
.menu {
display: flex;
align-items: center;
list-style: none;
}
.menu li {
margin: 0px 10px;
padding: 12px 8px;
font-size: 14px;
}
.toggle {
font-size: 18px;
display: none;
}
@media screen and (max-width: 600px) {
nav {
display: block;
position: relative;
padding: 15px 20px;
}
.menu {
margin-top: 15px;
display: none;
}
.menu.active,
.toggle {
display: block;
}
.toggle {
position: absolute;
top: 25px;
right: 20px;
}
}
body {
background: linear-gradient(to bottom,
rgba(30, 59, 112, 0.6),
rgba(2, 13, 24, 0.6)) no-repeat center center fixed,
url("../Images/Background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
font-family: 'Rubik', sans-serif;
}