Can someone explain how to make a nav bar responsive?

I am not yet working on JavaScript I am still leaning css and html, so any help or alternatives are helpful, thanks.

there are a few ways that do not require javascript. I’ve only been doing this for 34 days so take what I say with a grain of salt.
As I am understanding it the first concept in responsive design is to get away from using static measurements such as pixels and rather use relative measurements like percentages and rems.

rem is a measurement that relates to the root element.
what I do is I start out by declaring my font- size as a percentage of the monitor width like this:

:root{font-size: 1.5vw;} 

that sets my base unit of measurement to be 1.5% of the monitor width.
from there on all my measurements are in rem units for example
1rem would be the base font size
h1 elements would get something like 2.5rem that would be 3.75% of the monitor width
and so on…
use rem for your padding and margins too.
what this does is make your font size automatically scale keeping the same proportions regardless of screen size.

for smaller screens sometimes a media query which bumps up the root value comes in handy. but again all your other measurements remain unchanged.
Like this:

@media  (max-width: 700px)
:root{font-size: 2vw;}

notice that I do use pixels in the media query because that is referring to the number of pixels in the view port.
now that font size is out of the way lets proceed to building the nav bar

say you have four items in that navigation menu

you will create a division with four child elements.

<div id="navbar">
      <a class="nav_item"  href="#">one</a>
      <a  class="nav_item" href="#">two</a>
      <a class="nav_item" href="#">three</a>
      <a class="nav_item"  href="#">four</a>
</div>

now for the css

:root{font-size: 1.5vw;} 

#navbar{
         width: 100vw;
         height: 3rem;
				 background: red;
				 display: flex;
				align-items: center;
				 justify-content: space-around;
}

.nav_item{
	background: white;
	font-size: 1.5rem;
	width:20%;
	text-align: center;
}

@media (max-width: 700px)
{
	:root{
		font-size: 2vw;
	}
}
``
we have set our font-size to be a unit relative to the screen width.
we have set the navbar to be 100% of the screen width.
we have set the nav_items to be 20% of the screen width
we have set the display of the navbar to flex and assigned an alignment of center and a justification of space around. this evenly distributes the remaining space around the child elements on the horizontal axis and centers them on the vertical axis.

what this does is that regardless of the screen size all of these items will always be in the exact proportions to each other.
True responsiveness.

see it here

https://codepen.io/chriscline1138/pen/GPGLvx