How to Display Header on Bottom Position in Elementor WordPress

In this wordpress tutorial for beginners you will learn how to show header on bottom position of website using elementor pro website page builder plugin. So we are going to display sticky header on bottom side with logo and menu on desktop layout and on mobile portrait / device we are going to display header on default top position. Then add css class in main container / section in advanced tab and then add custom css for desktop and mobile layout.

Add CSS Class in Main Container " bottom-header ".
** Then Add Custom CSS:

.bottom-header {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
.bottom-header {
position: relative;
}
}

#header #bottom #position #menu #logo #desktop #mobile #css #elementor #elementorpro #elementorpagebuilder #wordpress #wordpresstutorial #webtaskwithhassan #hassangilani