Welcome to another exciting tutorial brought to you by WebSense Pro! In this video, we’ll dive into creating a sleek and stylish navigation and header for your Elementor website. Whether you’re a developer or building your own website, this tutorial is a must-watch. By the end, you’ll have a stunning header that not only enhances the visual appeal of your site but also improves user experience. So, let’s jump right into it!
Step 1: Setting Up the Header
First, open Elementor and navigate to the theme builder section. Select the header template and give it a suitable name. Once inserted, click on the settings to customize it further.
Step 2: Adding Logo and Navigation Icon
In the header layout, create a two-column structure using a flexbox container. Place your logo in one column and the navigation icon (hamburger menu) in the other. Customize the size and alignment to your preference.
Step 3: Designing the Full-Width Navigation Menu
Now, let’s create the full-width navigation menu section. Choose a two-column structure and set its content width to full width. Adjust the height and remove any padding to achieve a seamless look.
Step 4: Styling the Navigation Menu
Give the navigation menu section a background color to make it visually appealing. Utilize spacer widgets to add background images for each navigation item. Customize colors, typography, and spacing to enhance the overall aesthetic.
Step 5: Adding Close Button
Include a close button for the navigation menu. Create a container for the button, style it with a contrasting background color, and add an icon widget for the close icon (e.g., grip lines). Adjust size and alignment as needed.
Step 6: Adding Custom CSS and JavaScript
CSS Code Snippet on Menu Container (mdw-image-menu):
selector{
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
--h: var(--min-height);
}
selector.showing{
opacity: 1;
pointer-events: auto;
}
selector .elementor-widget-icon-list ul li{
opacity: 0;
transform: translateY(30px) scaleY(1.1) skewY(10deg);
}
selector.showing .elementor-widget-icon-list ul li{
opacity: 1;
transform: none;
transition: all 0.5s ease-in-out calc(0.2s + var(--index,1)*0.1s);
}
selector .mdw-menu-right,
selector .mdw-menu-close{
opacity: 0;
}
selector.showing .mdw-menu-right,
selector.showing .mdw-menu-close{
opacity: 1;
transition: all 0.5s ease-in-out 0.3s;
}
.mdw-menu-open,
.mdw-menu-close{
cursor: pointer;
}JavaScript Code Snippet for Full Width Menu:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
function hoveDefault(){
$('.mdw-menu-left .elementor-icon-list-text').eq(0).trigger('mouseover')
}
function openMenu(){
$('.mdw-image-menu').addClass('showing')
}
function closemenu(){
$('.mdw-image-menu').removeClass('showing')
setTimeout(hoveDefault, 500)
}
$('.mdw-image-menu').find('.elementor-widget-icon-list ul li').each(function(){
var index = $(this).index()+1
$(this).css('--index', index)
})
$('.mdw-menu-open').on('click', openMenu)
$('.mdw-menu-close').on('click', closemenu)
/* If Link is #id then Close Menu */
$('.mdw-menu-left a').on('click', function(e){
var link = $(this).attr('href')
if(link){
if(link == '#'){
e.preventDefault()
}
if( link.length > 1 && link.startsWith('#') ){
closemenu()
}
}
})
/* Image and Color Change on Menu Item Hover */
$('.mdw-menu-left .elementor-icon-list-text').hover(function(e){
var $this = $(this),
index = $this.closest('.elementor-icon-list-item').index(),
currentImage = $('.mdw-menu-right .elementor-widget-spacer').eq(index),
color = currentImage.find('.elementor-widget-container').css('background-color')
$this.closest('.mdw-image-menu').css('background-color', color)
if(!currentImage.length) return
$this.closest('.elementor-icon-list-items').find('.elementor-icon-list-text').removeClass('active')
if(e.originalEvent){ $this.addClass('active') }
currentImage.siblings('.elementor-widget-spacer').removeClass('active')
currentImage.addClass('active')
}, function(){})
hoveDefault()
})
/* Adjust alignment of Left side Menu */
$(window).on('load resize', function(){
$('.mdw-menu-left').each(function(){
var containerHeight = $(this).height(),
menuHeight = $(this).find('.elementor-widget-icon-list').outerHeight()
if( menuHeight > containerHeight ){
$(this).addClass('overflow')
}else{
$(this).removeClass('overflow')
}
})
})
</script>CSS Code Snippet on Menu Right Container (mdw-menu-right):
selector .elementor-widget-spacer{
opacity: 0;
transition: all 0.4s ease-in-out;
}
selector .elementor-widget-spacer:nth-child(1),
selector .elementor-widget-spacer.active{
opacity: 1;
}
.mdw-menu-close .elementor-widget-divider{
width: 100% !important;
flex-grow: 0;
}
@media(max-width:767px){
selector{
position: absolute;
height: 100%;
z-index: 0;
}
}CSS Code Snippet on Icon List Widget:
selector{
--hover-color: #ffffff;
--mobile-color: #000000;
--mobile-background: #ffffff;
}
selector .elementor-icon-list-text{
transition: all 0.3s ease-in-out;
}
selector .elementor-icon-list-text.active{
color: var(--hover-color, #fff);
}
selector a:focus{
outline: none;
}
@media (max-width: 767px){
selector .elementor-icon-list-text{
background: var(--mobile-background, #fff);
padding: 8px 10px;
}
selector .elementor-icon-list-text,
selector .elementor-icon-list-text.active{
color: var(--mobile-color, #000) !important;
}
}CSS Code Snippet on Menu Left Container (mdw-menu-left):
selector{
height: var(--h);
}
selector.overflow::-webkit-scrollbar {
display: none;
}
selector.overflow{
justify-content: flex-start;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
selector .elementor-widget-html{
display: none;
}To ensure smooth functionality, add custom CSS and JavaScript codes provided in the tutorial description. These codes will handle menu animation and hover effects, enhancing user interaction.
Step 7: Testing and Finalizing
Preview your design to ensure everything works as intended. Test the navigation menu, hover effects, and close button functionality. Make any necessary adjustments to achieve the desired result.
