I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png
I have been using "position: absolute" to keep the circle in place, but the issue arises on smaller screens as depicted in this image: https://i.sstatic.net/6G3ri.png
This causes the circle to overlap the navbar items. How can I maintain the circle's position while ensuring it relates to the other navbar items?
I attempted to remove the "position: absolute" attribute from the circle, but this resulted in the navbar height increasing to match the circle's height, aligning the navbar items vertically with the circle like so: https://i.sstatic.net/qnaYl.png
Consequently, the navbar becomes too thick. Is there a solution to retain the navbar height and item alignment while centering the circle horizontally with the other items?
HTML:
<nav class="navbar p-4 z-2 justify-content-center">
<div class="circle me-4">
<img src="images/logo.png" alt="Logo" class="img-fluid">
</div>
<a class="nav-item text-white text-decoration-none" href="#">MENU</a>
<a class="nav-item text-white text-decoration-none" href="#">LOCATION & HOURS</a>
<a class="nav-item text-white text-decoration-none" href="#">ABOUT US</a>
<div id="socials" class="d-flex">
<div class="sm-circle me-2">
<a href="#" class="text-decoration-none">
<img src="images/facebook_logo.png" alt="Facebook Logo" class="img-fluid">
</a>
</div>
<div class="sm-circle me-2">
<a href="#">
<img src="images/instagram_logo.png" alt="Instagram Logo" class="img-fluid">
</a>
</div>
<div class="sm-circle">
<a href="#">
<img src="images/tripadvisor_logo.png" alt="TripAdvisor Logo" class="img-fluid">
</a>
</div>
</div>
</nav>
CSS:
nav {
position: absolute !important;
top: 60px;
left: 0;
width: 100%;
background-color: #d58d26;
}
nav a {
color: white;
}
nav a.nav-item:not(:last-child) {
margin-right: 55px;
}
.circle {
width: 155px;
height: auto;
background-color: #d58d26;
border-radius: 50%;
}
.sm-circle {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-radius: 50%;
}
.sm-circle img {
width: 27px;
height: auto;
}