I need some help adjusting my navbar to fit on mobile screens. While I can make the logo shrink, I'm struggling to change the size of the links so that the navbar doesn't get cut off.
Below is the code for my Navbar and the corresponding CSS.
NAV
<nav class="navbar navbar-expand bg-dark">
<div class="container relative">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/#portfolio">Portfolio</a>
</li>
<a href="{% url 'home' %}">
<img class="image-fluid" id="vswlogo" src="{% static 'images/Artboard_3.png' %}"/>
</a>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
@media screen and (max-width: 900px) {
body {
width: 100%;
}
}
@media screen and (max-width: 768px) {
body {
width: 100%;
}
}
@media screen and (max-width: 600px) {
body {
width: 100%;
}
}
@media screen and (max-width: 480px) {
body {
width: 100%;
}
}
@media screen and (max-width: 900px) {
#portfoliogrid1 {
width: 100%;
}
}
@media screen and (max-width: 768px) {
#portfoliogrid1 {
width: 100%;
}
}
@media screen and (max-width: 600px) {
#portfoliogrid1 {
width: 100%;
}
}
@media screen and (max-width: 480px) {
#portfoliogrid1 {
width: 100%;
}
}
@media screen and (max-width: 900px) {
#portfoliogrid2 {
width: 100%;
}
}
@media screen and (max-width: 768px) {
#portfoliogrid2 {
width: 100%;
}
}
@media screen and (max-width: 600px) {
#portfoliogrid2 {
width: 100%;
}
}
@media screen and (max-width: 480px) {
#portfoliogrid2 {
width: 100%;
}
}
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
h1 {
font-size: 50px;
text-align: center;
color: white;
}
h2 {
text-align: center;
font-size: 1.5em;
font-weight: bold;
color: white;
padding-top: px;
margin-bottom: -10px;
}
h3 {
text-align: center;
color: white;
}
p {
font-family: "Roboto", sans-serif;
font-weight: bold;
color: white;
}
/* MISC */
.container-banner {
margin: ;
}
hr {
color: white;
margin-bottom: 20px;
}
.banner-image {
text-align: center;
}
/* Body */
body {
background-image: url("{% static 'images/purple.jpg' %}");
padding: 15px;
font-family: "Roboto", sans-serif;
font-weight: bold;
background-repeat: no-repeat;
background-size: 100% 200%;
position: relative;
max-width: 100%;
}
html, body {
overflow-x: hidden;
}
/* Portfolio Columns & Images */
.arrow-down {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow-center {
text-align: center;
}
#portfoliothumbnail {
width: 100%;
margin-bottom: 3px;
}
#portfoliogrid1 {
margin-right: -58px;
}
#portfoliogrid2 {
margin-left: -10px;
margin-right: -10px;
}
row {
margin: 8px -16px;
margin-bottom: 20px;
}
/* Navbar */
.navbar {
margin: -1% -1% 1% -1%;
padding: 30px;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
font-size: 1.7em;
}
.nav-link {
padding-top: 35px;
padding-left: 5px;
}
.navbar .navbar-nav .nav-link:hover {
color: #ffffff;
text-decoration: underline;
}
.navbar-logo-centered .navbar-nav .nav-link {
padding: 0.5em 1em;
}
.navbar img {
height: 100px;
padding-top: 10px;
padding-left: 40px;
padding-right: 40px;
top: -50px;
left: -35px;
display: block;
z-index: 999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
#vswlogo:hover {
transform: scale(1.3);
}
I apologize for the excessive @media queries in my CSS. I'm still figuring out which ones are necessary and which can be removed. Any insights on what I might be missing or doing incorrectly would be greatly appreciated. I'm always learning and open to feedback.