Elementor: Flexible columns with shrinkwrapping effect - css

Question

is anyone here using Elementor?
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.
Basically, what I wanted to achieve is something like this.
Expected Output
But what I'm currently done is Output
Adding a border on it Output-with-Border
Here is the issue when the screen/window is resized Issue
Where it should be something like this Expected-output-on-resize
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>

Answer 1

I don't think it's possible by using the free version of Elementor. However you can still achieve what you want.
The idea is by using the ShortCode.
Since you are using OceanWP theme plugin then you will need to install the Ocean Extra plugin first.
STEP 1: Create templates
You will need to create a template for those four elements by navigating into your WordPress Dashboard > My Library then create the templates by clicking the Add New button and name them with the following:
search-bar
logo
navigation-menu
header
Each of the templates you created will generate a shortcode so take note of them.
STEP 2: Edit the templates you created using Elementor
Edit the template you created using Elementor, on the search-bar use the widget of Advanced Woo Search since you said you are using its plugin, you may also use its shortcode if it has a shortcode,just search for the widget ShortCode in Elementor then drag and drop it into the section, input the shortcode of the Advanced woo search then make the width full and 100%, save and publish it.
In the template Logo, edit it again using Elementor then use the widget Custom Header Logo as you said you are using it, then go to Advanced > Positioning then set the Width to Inline(Auto) and Vertical Align to Start. This will position the logo in the Left side of the section otherwise, position it into the left side, save and publish it.
Edit the template navigation-menu using Elementor, from the widgets search for Custom Header Nav and use it then position it into the right side of the section.
NOTE: You don't have to change anything in the section of Elementor.
The last thing is the header template, before editing the header template, you must create a shortcode with the tag you created, so don't edit it yet, proceed to next step.
STEP 3: Create a shortcode under your function.php
function cs_custom_header_shortcode( $atts ) {
$logo = do_shortcode('[shortcode of logo template]');
$search = do_shortcode('[shortcode of search-bar template]');
$nav = do_shortcode('[shortcode of navigation-menu template]');
echo '
<div class="cs-flex-container">
<div class="cs-flex-item cs-flex1"><div>'.$logo.'</div></div>
<div class="cs-flex-item cs-flex2"><div>'.$search.'</div></div>
<div class="cs-flex-item cs-flex3"><div>'.$nav.'</div></div>
</div>
';
}
add_shortcode( 'cs_custom_header', 'cs_custom_header_shortcode');
copy and paste the above code into your function.php, I've use your idea, I just replace the tag into div.
Notice the do_shortcode('[shortcode of logo template]');, replace the [shortcode of logo template] with the shortcode of those templates you created.
Your shortcode now for this is [cs_custom_header].
STEP 4: Edit the header template using elementor and use the shortcode [cs_custom_header].
Edit the header template using Elementor, then from the list of widget search for ShortCode then drag and drop it into the section and input the following shortcode [cs_custom_header].
STEP 5: Edit the CSS style.
Go to your Wordpress Dashboard > Appearance > Customize > CSS/JS and input the following CSS style.
.cs-flex-container {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.cs-flex-item {
background: #6AB6D8;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.cs-flex-item:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 18px;
}
.cs-flex1 {
flex-basis: auto;
}
.cs-flex1:after {
content: 'auto';
}
.cs-flex2 {
flex: 1;
flex-basis: fill;
}
.cs-flex2:after {
content: 'fill-remaining-space';
}
.cs-flex3 {
flex-basis: min-content;
}
.cs-flex3:after {
content: 'min-content';
}
You may also use it into your css child theme and again I just use your css code.
With the code you provided, I assume you know how to work on most of the thing but just lack on idea of how to do it using Elementor so I won't be very specific in everything, just a guide.
The steps maybe long, but you will achieve what you want with it.
Have a nice day.