Elementor: Flexible columns with shrinkwrapping effect

Replies: 0

I’m trying to create a header with Elementor. 3 columns, I have a **logo** in the left, **search bar** in the middle and a **navigation menu** on the right side.

To give you more details, I wanted to achieve the same functionality as the below code on Elementor.

.container {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex: 1;
  flex-basis: fill;
}

.flex2:after {
  content: 'fill-remaining-space';
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

<ul class="container">
  <li class="flex flex1"><div style="background: #000; width: 200px;">Logo</div></li>
  <li class="flex flex2"><div style="background: #000; width: 100%; margin-right: 10px; margin-left-10px;">Search-Bar</div></li>
  <li class="flex flex3"><div style="background: #000; width: 350px;">Navigation Menu</div></li>
</ul>