Kevin Powell - Community•3mo ago

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!

9 Replies

Mannix•3mo ago

you have display: grid on hamburger hover for the more is that needed ?

MeiFTW•3mo 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•3mo 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•3mo 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•3mo ago

there must be something else in your code breaking it

Mannix•3mo ago

https://codepen.io/MannixMD/pen/ZEZwNNW

Mannix

CodePen

ZEZwNNW

...

Mannix•3mo ago

your code without the use of grid

MeiFTW•3mo 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•3mo ago

you gotta check dev tools to see what is going on. The code you posted should work as shown in the codepen 🙂

Gaming

Programming

Display certain li elements in a single row