Welcome to another insightful tutorial from WebSense Pro! In this Elementor tutorial video, our team unveils a step-by-step guide to crafting an eye-catching vertical sidebar header using the latest Flexbox container techniques. Watch as we demonstrate the process of designing a vertical header that adds a touch of elegance and functionality to your website.
Learn how to seamlessly integrate an Elementor sidebar menu that automatically highlights as you scroll through the pages. Discover the trick to slimming down the header with just an icon for a sleek and modern look. Our responsive design ensures that this sidebar header looks fantastic on various devices, from tablets to mobile phones.
To get started, click on “Templates” and select “Theme Builder” in the left-hand menu. Follow along as we walk you through the creation of this stunning sidebar header. Learn to adjust content width, height, background, and positioning to achieve the perfect layout. Plus, we provide you with the necessary CSS code for easy implementation.
Code Instructions according to Timestamps
Time – 02:00
selector{
width: 250px;
overflow: auto;
position: fixed;
transition: all 0.3s ease-in-out !important;
overflow-x: hidden;
z-index: 1;
-ms-overflow-style: none;
scrollbar-width: none;
}
selector::-webkit-scrollbar{
display: none;
}
.slide{
transform: translateX(0px) !important;
}
.full-width{
margin-left: 80px !important;
width: 100%;
transition: all 0.3s ease;
}
.main-content{
margin-left: 250px;
transition: all 0.3s ease;
width: 100%;
}
body.opening .sidebar{
width: 80px !important;
transition: all 0.3s ease-in-out;
}
selector .elementor-icon-list-item.active span,
selector .elementor-icon-list-item:hover span,
selector .elementor-icon-list-item.active span i,
selector .elementor-icon-list-item:hover span i{
color: #000;
}
selector span:focus{
outline: none;
}
.elementor-icon-list-item{
padding-bottom: 0px !important;
padding: 10px 10px !important;
}
.elementor-icon-list-item:hover{
cursor: pointer;
background-color: #fff;
border-radius: 4px;
}
body.opening .elementor-widget-search-form form:before{
z-index: 1;
}
body.opening .elementor-search-form__icon{
padding-left: 14px !important;
}
.elementor-icon-list-text{
transition: all 0.3s ease-in-out;
}
body.opening .elementor-icon-list-text{
opacity: 0;
}
.elementor-widget-image-box{
transition: all 0.3s ease-in-out;
}
body.opening .elementor-widget-image-box{
opacity: 0;
}
.user{
transition: all 0.3s ease-in-out;
}
body.opening .user .elementor-widget-wrap{
padding-left: 20px !important;
padding-right: 20px !important;
}
.logo{
transition: all 0.3s ease-in-out;
}
body.opening .logo{
opacity: 0;
}
body.open .logo{
display: none;
}
.sidebar-toggle:hover, .sidebar-toggle1:hover{
cursor: pointer;
}
body.opening .sidebar-toggle{
left: 25px !important;
}
body.opening .user .elementor-widget-heading{
display: none;
}
body.opening .user img {
min-width: 40px !important;
transition: all 0.3s ease-in-out;
}
body.opening .user img {
width: 40px;
transition: all 0.3s ease-in-out;
}
header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
margin-left: var(--width);
transition: all 0.3s ease-in-out !important;
}
body.opening header + *,
body.opening [data-elementor-type="header"] + *,
body.opening footer,
body.opening [data-elementor-type="footer"]{
margin-left: var(--narrow-width);
}
@media (max-width: 1024px){
header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
margin-left: var(--narrow-width);
transform: translateX(calc(var(--width) - var(--narrow-width)));
transition: all 0.6s ease-in-out !important;
}
body.opening header + *,
body.opening [data-elementor-type="header"] + *,
body.opening footer,
body.opening [data-elementor-type="footer"]{
transform: translateX(0);
transition: all 0.3s ease-in-out !important;
}
}
@media (max-width: 767px){
selector{
height: auto;
}
body.left selector{
transform: translateX(calc(-1*var(--width)));
}
header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
margin-left: 0;
transform: translateX(var(--width));
transition: all 0.3s ease-in-out !important;
}
body.left header + *,
body.left [data-elementor-type="header"] + *,
body.left footer,
body.left [data-elementor-type="footer"]{
transform: translateX(0);
}
.sidebar-toggle{
display: none;
}
.main-content{
margin-left: 0px;
}
}
.site-content footer,
.site-content header + *{
margin: 0 !important;
transform: none !important;
}
body.opening .elementor-inner-section .elementor-widget-wrap{
padding-left: 14px !important;
padding-right: 14px !important;
}
html, body{
overflow-x: hidden;
}Time – 06:48
selector .elementor-icon{
position: relative;
}
selector i:before,
selector i:after,
selector .elementor-icon:after{
content: "";
height: 0.05em;
width: 0.8em;
position: absolute;
background: currentColor;
top: 50%;
left: 50%;
transform: translate(-50%,calc(-50% + 0.25em));
}
selector i:after{
transform: translate(-50%,calc(-50% - 0.25em));
}
selector .elementor-icon:after{
transform: translate(-50%,-50%);
}Time – 12:22
jQuery(document).ready(function(){
jQuery('.sidebar-toggle').on('click', function(){
jQuery('.main-content').toggleClass('full-width');
});
jQuery('.sidebar-toggle1').on('click', function(){
jQuery('.sidebar').toggleClass('slide');
});
jQuery('.sidebar-toggle').on('click', function(){
if( jQuery('body').hasClass('open') ){
jQuery('body').removeClass('open');
setTimeout(function(){
jQuery('body').removeClass('opening');
},300);
}else{
jQuery('body').addClass('opening');
setTimeout(function(){
jQuery('body').addClass('open');
},300);
}
});
jQuery('.navigation .elementor-icon-list-item').on('click', function(){
jQuery('.navigation .elementor-icon-list-item').removeClass('active');
jQuery(this).addClass('active');
clickLock = true;
setTimeout(function(){
clickLock = false;
},500);
});
});
jQuery(window).on('load resize', function(){
if( jQuery(window).width() < 768 ){
jQuery('body').removeClass('open opening');
jQuery('body').addClass('left');
}else if( jQuery(window).width() < 1025 ){
jQuery('body').addClass('open opening');
}else{
jQuery('body').removeClass('open opening');
}
});Time – 14:15
selector .elementor-icon{
position: relative;
}
selector i:before,
selector i:after,
selector .elementor-icon:after{
content: "";
height: 0.05em;
width: 0.8em;
position: absolute;
background: currentColor;
top: 50%;
left: 50%;
transform: translate(-50%,calc(-50% + 0.25em));
}
selector i:after{
transform: translate(-50%,calc(-50% - 0.25em));
}
selector .elementor-icon:after{
transform: translate(-50%,-50%);
}
Our tutorial covers everything from adding images and icons to styling text and adjusting borders. You’ll see how we carefully fine-tune each element to create a harmonious design. Whether you’re a beginner or an experienced Elementor user, you’ll find this tutorial incredibly valuable for enhancing your website’s visual appeal and user experience.
Don’t miss out on this comprehensive tutorial! Subscribe to our channel for more insightful guides on web design and development. If you have any questions or need assistance with creating similar headers, feel free to reach out to us via the contact form provided in the description below.
