Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen?
Below is the HTML code:
<body>
<nav class="navbar">
<a id="logoHolder" class="navbar-brand">
<img id="navbarIMG" src="/assets/navbar_logo.png">
</a>
<a id="cogfeedHolder" class="navbar-brand">
<img id="cogfeedIMG" src="/assets/cogfeed_logo.png">
</a>
<a id="accountHolder" class="navbar-brand">
<img id="accountIMG" src="assets/account_icon.png">
</a>
</nav>
</body>
And here is the corresponding CSS:
.navbar {
background-image: linear-gradient(darkblue, blue, darkblue);
}
body {
background-color: lightblue;
}
#navbarIMG,
#cogfeedIMG,
#accountIMG {
display: inline-block;
width: 100%;
height: auto;
}
#accountIMG {
width: 80%;
}
#logoHolder {
max-width: 342.4px;
max-height: 102.29px;
}
#cogfeedHolder {
max-width: 339.2px;
max-height: 74.35;
}
#accountHolder {
max-width: 136px;
max-height: 118px;
}
I would appreciate any assistance with this as I'm not very skilled at formatting. Thank you!