remove "next to each other" placement on smaller screen sizes - html

Question

I want to create a responsive navigation bar for my page. I use floating divs for the logo and navigation link bar.
If you want to test the fiddle I recommend opening this on full screen.
#navbar {
top: 0;
position: sticky;
height: 80px;
padding: 0 160px;
background: #232323;
}
.navbarItemContainer {
height: 100%;
}
#navbarLogoContainer {
display: flex;
float: left;
align-items: center;
}
#navbarLinkContainer {
display: grid;
grid-template-columns: 100px 100px 100px;
float: right;
text-align: center;
align-items: center;
}
.navbarLink {
color: #039be5;
transition: 0.2s;
}
.navbarLink:hover {
color: #25bdf7;
transition: 0.2s;
}
.navbarLink>img {
width: 32px;
height: 32px;
display: none;
}
#media only screen and (max-width: 1000px) {
#navbar {
padding: 0 60px;
}
.navbarLink>span {
display: none;
}
.navbarLink>img {
display: block;
}
.navbarLink>img {
width: 24px;
height: 24px;
}
#navbarLinkContainer {
grid-template-columns: 24px 24px 24px;
grid-gap: 0 40px;
}
}
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
}
<div id="navbar">
<div id="navbarLogoContainer" class="navbarItemContainer">
<a>
<img class="img" src="/resources/logo.png">
</a>
</div>
<div id="navbarLinkContainer" class="navbarItemContainer">
<a class="navbarLink">
<span>
Link 1
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 2
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 3
</span>
<img class="img" src="">
</a>
</div>
</div>
When it comes to mobile screen sizes the navigation bar with 6 icons is too big. I want to adjust the navigation bar at a screen size of 400px.
#media only screen and (max-width: 400px) {
#navbar {
background: red; // placeholder
}
}
I want to remove the floating divs and place the logo above the button bar. When it comes to a screen size smaller than 400px the logo would have to move one row up. The result would be
How can I achieve this?
EDIT:
I tried
#media only screen and (max-width: 400px) {
#navbarLogoContainer {
clear: left;
}
#navbarLinkContainer {
grid-template-columns: 33.33% 33.33% 33.33%;
clear: right;
}
}
but it did not help.

Answer 1

Try this:
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
#navbarLogoContainer {
display:block;
float:none;
text-align:center;
}
#navbarLinkContainer {
display: block;
width: 100%;
text-align: center;
}
.navbarItemContainer {
height: 30px;
padding: 5px 0;
}
.navbarLink {
display:inline-block;
}
}
I also made a snippet:
#navbar {
top: 0;
position: sticky;
height: 80px;
padding: 0 160px;
background: #232323;
}
.navbarItemContainer {
height: 100%;
}
#navbarLogoContainer {
display: flex;
float: left;
align-items: center;
}
#navbarLinkContainer {
display: grid;
grid-template-columns: 100px 100px 100px;
float: right;
text-align: center;
align-items: center;
}
.navbarLink {
color: #039be5;
transition: 0.2s;
}
.navbarLink:hover {
color: #25bdf7;
transition: 0.2s;
}
.navbarLink>img {
width: 32px;
height: 32px;
display: none;
}
#media only screen and (max-width: 1000px) {
#navbar {
padding: 0 60px;
}
.navbarLink>span {
display: none;
}
.navbarLink>img {
display: block;
}
.navbarLink>img {
width: 24px;
height: 24px;
}
#navbarLinkContainer {
grid-template-columns: 24px 24px 24px;
grid-gap: 0 40px;
}
}
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
#navbarLogoContainer {
display:block;
float:none;
text-align:center;
}
#navbarLinkContainer {
display: block;
width: 100%;
text-align: center;
}
.navbarItemContainer {
height: 30px;
padding: 5px 0;
}
.navbarLink {
display:inline-block;
}
}
<div id="navbar">
<div id="navbarLogoContainer" class="navbarItemContainer">
<a>
<img class="img" src="/resources/logo.png">
</a>
</div>
<div id="navbarLinkContainer" class="navbarItemContainer">
<a class="navbarLink">
<span>
Link 1
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 2
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 3
</span>
<img class="img" src="">
</a>
</div>
</div>
Let me know if this helped.

Answer 2

here is a simple working example that can help you with your code
.container {
height: 100vh;
}
.navbar {
display: flex;
}
.navbar .logo-container {
flex: 1;
display: flex;
}
.navbar .logo-container span {
flex: 1;
}
.navbar .links-container {
flex: 1;
display: flex;
}
.navbar .links-container div {
flex: 1;
}
#media only screen and (max-width: 400px) {
.navbar {
display: grid;
grid-template-rows: 150px auto;
grid-template-columns: repeat(6, 1fr);
}
.navbar .logo-container {
grid-column: 1/7;
display: flex;
justify-content: center;
text-align: center;
}
.navbar .links-container {
grid-column: 1/7;
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo-container">
<span>image</span>
</div>
<div class="links-container">
<div>link1</div>
<div>link2</div>
<div>link3</div>
<div>link4</div>
<div>link5</div>
<div>link6</div>
</div>
</div>
</div>
</body>
</html>

Answer 3

For 400px I think I'll go for this one
What do you think about this solution?
#media only screen and (max-width: 400px){
#navbar {
height: 100px;
padding: 0 5px;
}
#navbarLogoContainer {
height: 50%;
display: block;
float: none;
text-align: center;
}
#navbarLinkContainer {
height: 50%;
display: grid;
float: none;
grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
justify-items: center;
grid-gap: 0 5px;
}
}
#navbar {
top: 0;
position: sticky;
height: 80px;
padding: 0 160px;
background: #232323;
}
.navbarItemContainer {
height: 100%;
}
#navbarLogoContainer {
display: flex;
float: left;
align-items: center;
}
#navbarLinkContainer {
display: grid;
grid-template-columns: 100px 100px 100px;
float: right;
text-align: center;
align-items: center;
}
.navbarLink {
color: #039be5;
transition: 0.2s;
}
.navbarLink:hover {
color: #25bdf7;
transition: 0.2s;
}
.navbarLink>img {
width: 32px;
height: 32px;
display: none;
}
#media only screen and (max-width: 1000px) {
#navbar {
padding: 0 60px;
}
.navbarLink>span {
display: none;
}
.navbarLink>img {
display: block;
}
.navbarLink>img {
width: 24px;
height: 24px;
}
#navbarLinkContainer {
grid-template-columns: 24px 24px 24px;
grid-gap: 0 40px;
}
}
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
}
<div id="navbar">
<div id="navbarLogoContainer" class="navbarItemContainer">
<a>
<img class="img" src="/resources/logo.png">
</a>
</div>
<div id="navbarLinkContainer" class="navbarItemContainer">
<a class="navbarLink">
<span>
Link 1
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 2
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 3
</span>
<img class="img" src="">
</a>
</div>
</div>