Display certain li elements in a single row

<div class="hamburguer">
<button><i class="fa-solid fa-bars"></i></button>
<ul class="more">
<li><a class="info" href="#about">About</a></li>
<li><a class="info" href="#trailer">Trailer</a></li>
<li><a class="info" href="#locations">Locations</a></li>
<li><a class="info" href="#media">Media</a></li>
<li class="social"><a href="twitter" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
<li class="social"><a href="discord" target="_blank"><i class="fa-brands fa-discord"></i></a></li>
<li class="social"><a href="youtube" target="_blank"><i class="fa-brands fa-youtube"></i><a></li>
</ul>
</div>
<div class="hamburguer">
<button><i class="fa-solid fa-bars"></i></button>
<ul class="more">
<li><a class="info" href="#about">About</a></li>
<li><a class="info" href="#trailer">Trailer</a></li>
<li><a class="info" href="#locations">Locations</a></li>
<li><a class="info" href="#media">Media</a></li>
<li class="social"><a href="twitter" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
<li class="social"><a href="discord" target="_blank"><i class="fa-brands fa-discord"></i></a></li>
<li class="social"><a href="youtube" target="_blank"><i class="fa-brands fa-youtube"></i><a></li>
</ul>
</div>
nav ul {
right: 0px;
top: 0px;
padding: 0;
margin: 0;
height: 100%;
position: absolute;
display: block;
list-style: none;
padding-right: 1em;
}
nav ul li {
display: inline-block;
text-align: center;
vertical-align: middle;
padding-right: 0.4em;
line-height: 55px;
}
.hamburguer {
display: inline-block;
position: absolute;
right: 0px;
margin-right: 0.5em;
}
.hamburguer .menu {
position: absolute;
background-color:rgba(102,0,10,0.9);
width: 180px;
right: -7px;
box-shadow: -5px 5px 5px #310101;
white-space: nowrap;
}
.hamburguer:hover .more {
display: grid;
}
.hamburguer:hover .menu {
height: 18em;
}
.hamburguer .more .info {
background-color: #0068bd;
}
.hamburguer .more .social {
background-color: #FFD614;
display: inline-block;
}
nav ul {
right: 0px;
top: 0px;
padding: 0;
margin: 0;
height: 100%;
position: absolute;
display: block;
list-style: none;
padding-right: 1em;
}
nav ul li {
display: inline-block;
text-align: center;
vertical-align: middle;
padding-right: 0.4em;
line-height: 55px;
}
.hamburguer {
display: inline-block;
position: absolute;
right: 0px;
margin-right: 0.5em;
}
.hamburguer .menu {
position: absolute;
background-color:rgba(102,0,10,0.9);
width: 180px;
right: -7px;
box-shadow: -5px 5px 5px #310101;
white-space: nowrap;
}
.hamburguer:hover .more {
display: grid;
}
.hamburguer:hover .menu {
height: 18em;
}
.hamburguer .more .info {
background-color: #0068bd;
}
.hamburguer .more .social {
background-color: #FFD614;
display: inline-block;
}
As shown in the screenshot: I would like to have the "social icons" displayed in a single row to fit the whole menu container but they somehow always end up in different rows, I have tried multiple display methods to no avail. If anyone could come up with a solution I would appreciate it!
No description
9 Replies
Mannix
Mannix2mo ago
you have display: grid on hamburger hover for the more is that needed ?
MeiFTW
MeiFTW2mo ago
Grid is what gave me the most similar result to what I wanted, trying block or flex ended up in a weird layout. Not sure about how creating more divs would be a plausible solution, though. also had to manually insert a height value in ":hover .menu" as auto or fit-content didn't work
Mannix
Mannix2mo ago
if you want to keep using it you can do this
.hamburguer:hover .more {
display: grid;
grid-template-columns: repeat(3,1fr);
}
.hamburguer:hover .more li:not(.social) {
grid-column: span 3;
}
.hamburguer:hover .more {
display: grid;
grid-template-columns: repeat(3,1fr);
}
.hamburguer:hover .more li:not(.social) {
grid-column: span 3;
}
but if you remove it it will work just like you want it to
MeiFTW
MeiFTW2mo ago
Tried pasting the code, it still shows up like in the screenshot. Do you think I should use another display method, then? Just kinda frustrated as it felt like I was close to finishing but I don't mind starting from scratch trying another thing
Mannix
Mannix2mo ago
there must be something else in your code breaking it
Mannix
Mannix2mo ago
your code without the use of grid
MeiFTW
MeiFTW2mo ago
Yeah... it certainly is weird, it is true that this is basically a responsive navbar that's inheriting stuff so maybe that's what's causing it.
Mannix
Mannix2mo ago
you gotta check dev tools to see what is going on. The code you posted should work as shown in the codepen 🙂