News template like layout for menu - html

Question

I am trying to make a menu which is generated dynamically. Its structure is similar to a newspaper template. I did some research and came to know that using css flexbox we can achieve something like this. However i am still not able to achieve it.
This is the desired look I want:-
To replicate the issue:- click on 'Bilar' menu item-> check the menu -> the 4th menu item is expected to come a bit upwards, but its comes downwards.
Below is the codepen link and my code. Any help is appreciated.
Click this Codepen link to see the current code
$font-stack: OpenSans, Helvetica, sans-serif;
$primary: #e50000;
$primary-hover: #ca0000;
$text-color: #555555;
$white: #ffffff;
$graphic-grey-color: #e1e1e1;
$background-grey-color: #f5f5f5;
$main-dark-color: #202020;
$form-border-color: #dddddd;
$form-active-border-color: #999999;
$navbar-light-color: $main-dark-color;
$link-hover-color: $white;
$link-hover-decoration: none;
$nav-tabs-link-active-bg: $primary;
$navbar-brand-padding-y: 0rem;
$navbar-nav-link-padding-x: 0.9375rem;
$nav-link-padding-y: 0rem;
.header-navigation {
height: 80px;
border-bottom: 2px solid $primary;
.header-brand{
margin-right: 1.4375rem;
height: 100%;
}
}
.header-menu{
height: 100%;
}
.header-menu-item{
font-family: $font-stack;
height: 100%;
color: $main-dark-color;
&:hover {
background-color: $primary;
}
+ .-collapse{
z-index: 1000;
display: none;
position: absolute;
top: 80px;
left: 0px;
// display: none;
opacity: 0;
.menu-item-level2 {
width: 100vw;
margin: auto;
.-level2-main-section{
padding: 0px;
background-color: $background-grey-color;
min-height: 280px;
.-level2-main-section-row{
max-width: 100%;
text-align: center;
margin: 30px 165px 50px 165px;
.-level2-menu-column{
padding: 0px;
text-align: left;
// .-level2-menu-container{
margin-bottom: 30px;
.-heading{
margin-bottom: 10px;
color: $main-dark-color;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.-subitems{
color: $text-color;
font-size: 16px;
line-height: 1.88;
}
// }
}
}
}
.-level2-side-section{
margin: auto;
padding: 20px;
background-color: $graphic-grey-color;
min-height: 280px;
.-info{
margin-bottom: 60px;
.-info-text{
margin-top: 10px;
line-height: 1.5;
font-size: 20px;
color: $text-color;
font-weight: normal;
}
}
}
}
}
}
.header-menu-item.active{
background-color: $primary;
color: $white;
+ .-collapse{
display: block;
opacity: 1;
transition: opacity 500ms linear;
}
}
.header-menu-list {
height: 100%;
}
.navbar{
padding: 0px 0px 0px 30px !important;
color: $text-color;
}
.header-brandname{
margin: 10px 0px;
}
.header-logo{
height: 100%;
padding: 0px 30px;
border-left: 1px solid $graphic-grey-color;
}

Answer 1

Your class col-lg-4 use the following responsive media query:
#media (min-width: 992px) {
.col-lg-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 25%;
max-width: 33.333333%;
}
}
wich means that once your browser width is higher than 992px, these colums takes 33.33% width and it should be 25% (if you want 4 columns)
EDITED: Just saw your screenshot. css flex wont let you do what you want. If the content is fixed you can just add your 4th menu inside first one container, removing col-lg-4 class like in this codepen (Note I added margin-top inline to make it look better.)
If the content is dinamic you may need to search for any other way to achieve it. masonry came to my mind as first thing I would look into: link

Answer 2

You can use multi column for this layout. I have added on last please check
.header-navigation {
height: 80px;
border-bottom: 2px solid #e50000;
}
.header-navigation .header-brand {
margin-right: 1.4375rem;
height: 100%;
}
.header-menu {
height: 100%;
}$font-stack: OpenSans, Helvetica, sans-serif;
$primary: #e50000;
$primary-hover: #ca0000;
$text-color: #555555;
$white: #ffffff;
$graphic-grey-color: #e1e1e1;
$background-grey-color: #f5f5f5;
$main-dark-color: #202020;
$form-border-color: #dddddd;
$form-active-border-color: #999999;
$navbar-light-color: $main-dark-color;
$link-hover-color: $white;
$link-hover-decoration: none;
$nav-tabs-link-active-bg: $primary;
$navbar-brand-padding-y: 0rem;
$navbar-nav-link-padding-x: 0.9375rem;
$nav-link-padding-y: 0rem;
.header-navigation {
height: 80px;
border-bottom: 2px solid $primary;
.header-brand {
margin-right: 1.4375rem;
height: 100%;
}
}
.header-menu {
height: 100%;
}
.header-menu-item {
font-family: $font-stack;
height: 100%;
color: $main-dark-color;
&:hover {
background-color: $primary;
}
+ .-collapse {
z-index: 1000;
display: none;
position: absolute;
top: 80px;
left: 0px;
// display: none;
opacity: 0;
.menu-item-level2 {
width: 100vw;
margin: auto;
.-level2-main-section {
padding: 0px;
background-color: $background-grey-color;
min-height: 280px;
.-level2-main-section-row {
max-width: 100%;
text-align: center;
margin: 30px 165px 50px 165px;
.-level2-menu-column {
padding: 0px;
text-align: left;
// .-level2-menu-container{
margin-bottom: 30px;
.-heading {
margin-bottom: 10px;
color: $main-dark-color;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.-subitems {
color: $text-color;
font-size: 16px;
line-height: 1.88;
}
// }
}
}
}
.-level2-side-section {
margin: auto;
padding: 20px;
background-color: $graphic-grey-color;
min-height: 280px;
.-info {
margin-bottom: 60px;
.-info-text {
margin-top: 10px;
line-height: 1.5;
font-size: 20px;
color: $text-color;
font-weight: normal;
}
}
}
}
}
}
.header-menu-item.active {
background-color: $primary;
color: $white;
+ .-collapse {
display: block;
opacity: 1;
transition: opacity 500ms linear;
}
}
.header-menu-list {
height: 100%;
}
.navbar {
padding: 0px 0px 0px 30px !important;
color: $text-color;
}
.header-brandname {
margin: 10px 0px;
}
.header-logo {
height: 100%;
padding: 0px 30px;
border-left: 1px solid $graphic-grey-color;
}
.menu-wrap {
display: block;
}
.row.-level2-main-section-row {
display: block;
column-count: 3;
}
.-level2-menu-column {
display: block;
}
.header-menu-item {
font-family: OpenSans, Helvetica, sans-serif;
height: 100%;
color: #202020;
}
.header-menu-item:hover {
background-color: #e50000;
}
.header-menu-item + .-collapse {
z-index: 1000;
display: none;
position: absolute;
top: 80px;
left: 0px;
opacity: 0;
}
.header-menu-item + .-collapse .menu-item-level2 {
width: 100vw;
margin: auto;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section {
padding: 0px;
background-color: #f5f5f5;
min-height: 280px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row {
max-width: 100%;
text-align: center;
margin: 30px 165px 50px 165px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column {
padding: 0px;
text-align: left;
margin-bottom: 30px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column .-heading {
margin-bottom: 10px;
color: #202020;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column .-subitems {
color: #555555;
font-size: 16px;
line-height: 1.88;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section {
margin: auto;
padding: 20px;
background-color: #e1e1e1;
min-height: 280px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section .-info {
margin-bottom: 60px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section .-info .-info-text {
margin-top: 10px;
line-height: 1.5;
font-size: 20px;
color: #555555;
font-weight: normal;
}
.header-menu-item.active {
background-color: #e50000;
color: #ffffff;
}
.header-menu-item.active + .-collapse {
display: block;
opacity: 1;
transition: opacity 500ms linear;
}
.header-menu-list {
height: 100%;
}
.navbar {
padding: 0px 0px 0px 30px !important;
color: #555555;
}
.header-brandname {
margin: 10px 0px;
}
.header-logo {
height: 100%;
padding: 0px 30px;
border-left: 1px solid #e1e1e1;
}
.menu-wrap {
display: block;
}
.row.-level2-main-section-row {
display: block;
column-count: 3;
}
.-level2-menu-column {
display: block;
}
<header class="header">
<nav class="header-navigation navbar navbar-expand-lg">
<a class="header-brand navbar-brand d-flex align-items-center pull-left" href="#">
<img src="/static/images/fc-logo.svg" alt="brand-logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-navigation" aria-controls="header-navigation"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="header-menu collapse navbar-collapse" id="header-navigation">
<ul class="header-menu-list navbar-nav mr-auto">
<li class="nav-item">
<a class="header-menu-item nav-link d-flex align-items-center" href="#">
<span>Bilar</span>
</a>
<div class="-collapse">
<div class="menu-item-level2 row">
<div class="-level2-main-section col-lg-10">
<div class="menu-wrap">
<div class="-level2-main-section-row row align-items-start">
<div class="-level2-menu-column -level2-menu-container col-lg-4">
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container col-lg-4">
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container col-lg-4">
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container col-lg-4">
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
</div>
</div>
</div>
<div class="-level2-side-section col-lg-2">
<div class="-info">
<a class="-info-img" href="#">
<img src="/static/images/car.png" alt="info-image-1">
</a>
<div class="-info-text">
Vilken Yaris ar du?
</div>
</div>
<div class="-info">
<a class="-info-img" href="#">
<img src="/static/images/car2.png" alt="info-image-2">
</a>
<div class="-info-text">
Basta familjebilen - 7 sittplatser!
</div>
</div>
</div>
</div>
</li>
<li class="nav-item ">
<a class="header-menu-item nav-link d-flex align-items-center" href="#">
<span>Finansiering</span>
</a>
</li>
<li class="nav-item ">
<a class="header-menu-item nav-link d-flex align-items-center" href="#">
<span>Service</span>
</a>
</li>
<li class="nav-item ">
<a class="header-menu-item nav-link d-flex align-items-center" href="#">
<span>Om oss</span>
</a>
</li>
<li class="nav-item ">
<a class="header-menu-item nav-link d-flex align-items-center" href="#">
<span>Min Toyota</span>
</a>
</li>
</ul>
</div>
<a href="#" class="header-logo pull-right d-flex align-items-center">
<img src="/static/images/toyota-logo.jpg" alt="brand-logo">
</a>
</nav>
</header>
Link

Answer 3

One way is using CSS column, but is is not widely supported. You can check its Browser compatibility here.
If you decide to do so, remember you can not combine it with flex. Hence, no Bootstrap flex classes for this part of your page.
Use column-count: #x for the number of columns in row.
Use break-inside: avoid; to avoid break column break.
.-level2-main-section-row {
border: 1px solid;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
column-count: 3;
}
.-level2-menu-column {
margin-bottom: 10px;
border: 1px solid red;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<div class="menu-wrap">
<div class="-level2-main-section-row align-items-start">
<div class="-level2-menu-column -level2-menu-container ">
<h1 class="-heading">Nya bilar</h1>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container ">
<h1 class="-heading">Nya bilar</h1>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-heading">Nya bilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container ">
<h1 class="-heading">Nya bilar</h1>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container ">
<h1 class="-heading">Nya bilar</h1>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container ">
<h1 class="-heading">Nya bilar</h1>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
<div class="-level2-menu-column -level2-menu-container">
<h1 class="-heading">Nya bilar</h1>
<div class="-subitems">Personbilar</div>
<div class="-subitems">Transportbilar</div>
</div>
</div>
</div>
Check this pen
You can set different column per page using media queries.
Update
An another problem with column is that it does not respect the order you lay down the columns. Therefore, if its important to order the columns, you may go for masonry or some other Javascript library.
This article is a good read on this topic.