Navbar links not getting smaller - html

Question

I am having an issue with my navbar, once I make the browser tab smaller, the text stays the same size but the logo gets smaller and smaller and disappears. How can I make it so everything gets smaller? If any more information is needed I will provide them. Here are some examples of my problem.
100% width page vs Page made smaller for smaller screens for example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
/* Nav start*/
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background-color: black;
}
.navbar.sticky {
background: black;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 20px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover {
color: #007bff;
}
.banner {
height: 100vh;
background-position: center;
background-attachment: fixed;
}
.about {
padding: 30px 0;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Nav end*/
<nav class="navbar">
<div class="content">
<div class="logo">
<img src="images/logo-villa-dor.jpg" width="100%">
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Fireplaces</li>
<li>Floorings</li>
<li>IronWorks</li>
<li>Ornaments</li>
<li>Woodwork</li>
<li>Radiators</li>
<li>Luminary</li>
<li>Miscellaneous</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>

Answer 1

I think you're using #media wrong.
#media (max-width: 868px)
indicates that these styles will be applied when it has a max width of 868px. So for small screens you need to decrease the font-size in there.
#media (max-width: 868px) {
.navbar .menu-list li a{
font-size: 16px; // for example
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265,
1.55);
}
}

Answer 2

I see some issues in your styles that have proven to be problematic for your design. For sake of demonstrating the media-queries behavior, I have deleted all your media queries and made just one that points to your <ul> and your logo, which appears to be the focal point in this example.
Please see the CSS changes I made between /* Media Start & /* Media End */. Also, my suggestion, if you are flexing the navbar, would be to use display: flex; instead of inline-flex. Then you can add justify-content: space-between; to properly align your nav components. Next, this is just out of preference, but I wouldn't suggest spacing your li's with margin-left because then you get left margin on your "Fireplaces" <li> which is just unnecessary margin. I used gap: 10px; as an alternative.
Please see the changes to the logo as well. With this correct structure for your media-queries, I believe it will be much easier for you to manipulate. Without being able to see your image or the size of it, it's challenging to give you an exact height & width so adjust the 25px around as necessary. Finally, setting font-sizes on logos or images won't be useful, unless there is a text element within the containing parent div of the image or logo.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection{
background: rgb(0,123,255,0.3);
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
/* Nav start*/
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background-color: black;
}
.navbar.sticky{
background: black;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list{
display: flex;
justify-content: space-between;
gap: 10px;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: #007bff;
}
.banner{
height: 100vh;
background-position: center;
background-attachment: fixed;
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}
.icon{
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 30px;
top: 20px;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Nav end*/
/* Media Start */
#media only screen and (max-width: 800px) {
ul.menu-list li a {
font-size: 10px;
}
.logo {
width: 25px;
height: 25px;
}
}
/* Media End */
<nav class="navbar">
<div class="content">
<div class="logo">
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Fireplaces</li>
<li>Floorings</li>
<li>IronWorks</li>
<li>Ornaments</li>
<li>Woodwork</li>
<li>Radiators</li>
<li>Luminary</li>
<li>Miscellaneous</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
EDIT:
.navbar .content {
display: flex;
align-items: baseline;
justify-content: space-between;
align-content: center;
}
Then I would add two media queries like so :
#media only screen and (max-width: 1060px) {
.menu-list li a {
font-size: 13px;
}
}
#media only screen and (max-width: 945px) {
.menu-list li a {
font-size: 11.5px;
}
}