How To Create WordPress Vertical Header With Elementor Page Builder

How To Create WordPress Vertical Header With Elementor Page Builder

September 10, 2024 | Mashiur Rahman

How-to-Create-a-Sticky-Menu-Header-With-Elementor.webp

CSS Code for Elementor Vertical Header: ( Main โ€“ Section CSS )

selector{
position: fixed;
width: 100%;
}
@media (min-width: 768px){
selector{
width: 100px;
}
}

@media (min-width: 767px) and (max-width: 1024px){
selector{
display:none;
}
}

 

CSS Code for Vertical Menu/Navigation: ( Menu CSS )

@media (min-width: 768px){
selector{
writing-mode: vertical-rl;
transform: scale(-1);
}
}

 

CSS Code for Page Left Margin: ( Header Page Elementor Setting )

@media (min-width: 768px){
.site-content, .site-footer{
margin-left: 100px;
}
}

@media (min-width: 1025px) and (max-width: 1399px){
.elementor-container:not(.elementor-location-header .elementor-container){
padding:0 20px;
}
}

@media (min-width: 767px) and (max-width: 1024px){
.site-content, .site-footer{
margin-left: 0;
}
}

Tags:

Catagory:

1 thought on “How To Create WordPress Vertical Header With Elementor Page Builder”

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This Post:

Scroll to Top