I have a website with a collapsible navbar at the top for small screens. I want to add a red circle positioned on the right side of the navbar. Something like this: view image here The circle is not a button and should be centered on the border of the navbar.
I've tried various solutions found online, like setting the parent div to relative position and the child div to absolute position. However, none of them have been responsive.
Below is my current HTML code, which is not responsive:
.circle {
position:absolute;
<--top:35px;-->
right:3vw;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top navbar-expand-lg green-background">
<div class="container-fluid">
<-- 80 lines of navbar code including a collapse navbar-collapse div -->
</div>
<div class="circle"></div>
</nav>I have only been able to place the circle for a specific screen size, and it doesn't respond well to changes in screen size or when in collapsible mode.
Thank you for any assistance you can provide. Have a great day :)