Greetings to all our valued partners!
I am seeking guidance on how to achieve the following task for a web application I am developing:
Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is displayed as a combination of a rectangle with a circle).
Check out the Nav Example in AdobeXD | View the complete design here
Is there a way to create this navbar using HTML/CSS?
Although I have some code already in place, I'm unsure about how to merge the div elements representing the rectangle and circle in order to maintain consistent shadowing and linear gradients. Is it feasible to achieve this effect? 🥺 Or would it be more efficient to export the nav design as an SVG file?
body{
margin: 0;
}
.navContainer{
width:100vw;
}
.mainNav{
width:100vw;
background: linear-gradient(#30355e 0%, #383e6e 100%);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
height: 73px;
border-radius: 0 0 40px 40px;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.25));
}
.circleNav{
width:110px;
height:110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
position: absolute;
left: calc(50% - 57px);
top: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}<html>
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
</html>