Thank you for taking the time to review my current code. The main issue I am encountering pertains to the responsiveness of the navbar. Whenever I zoom in or out, certain elements tend to lose their alignment and aesthetic appeal. Specifically, the navbar brand fails to stay aligned to the left of the navbar, and the blue box in the top right corner becomes overly wide when zooming in.
My goal is to achieve a responsive design similar to Bootstrap's navbar, where the content remains intact when zooming out and adjusts accordingly when zooming in. Could you assist me in modifying my code to achieve this outcome?
You can view the code on Codeply here:
Here is my HTML code utilizing Bootstrap:
<nav class="navbar custom-navbar navbar-expand-lg bd-nav">
<div class="nav-blue-bar">
<p class="nav-blue-bar-content">
<i class="fa-solid fa-square-phone"></i> 0000-111-2222
<i class="fa-solid fa-envelope" style="color: #ffffff"></i>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7a4838293929583b7909a969e9bd994989a">[email protected]</a>
</p>
<p class="nav-blue-bar-content-right">
We are now taking intakes for mat, Limited seats
</p>
</div>
<div class="container">
<a class="navbar-brand" href="#">Your Brand</a>
<hr class="line-1" />
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Universities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
</ul>
</div>
</div>
</nav>
And here is the accompanying CSS:
body {
max-width: 1920px;
margin: 0 auto;
min-width: 1000px;
}
.nav-blue-bar {
z-index: 1;
position: absolute;
top: 0;
right: 0;
width: 90%;
left: 266px;
height: 35px;
background-color: #192f59;
clip-path: polygon(0% 0%, 100% 0%, 980% 100%, 3% 100%);
}
.nav-blue-bar-content {
position: absolute;
top: 5px;
left: 100px;
color: #ffffff;
margin: 0;
font-size: 14px;
}
.nav-blue-bar-content-right {
position: absolute;
top: 5px;
right: 20%;
color: #ffffff;
margin: 0;
font-size: 14px;
}
.custom-navbar {
background-color: #f4f5f7;
min-height: 100px;
overflow: hidden;
max-width: 100vw;
}
.navbar-brand {
font-size: 34px;
font-weight: bold;
color: #192f59;
margin-left: 0%;
}
.nav-link {
font-size: 18px;
color: #000000;
}
.navbar-center {
display: flex;
justify-content: center;
padding-right: 15%;
}
.nav-item {
padding-right: 60px;
padding-top: 35px;
}
.line-1 {
position: relative;
width: 10%;
height: 0px;
left: -36px;
top: 10%;
opacity: 1;
border: 1px solid;
border-color: #192f59;
transform: rotate(116.03deg);
}
I am aiming for a design where the content remains fixed when zooming in. Both the navbar and the hr element should align to the left. For reference, this is the format and design I am striving to achieve: Link to Desired Design