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;
}
}
1 thought on “How To Create WordPress Vertical Header With Elementor Page Builder”
Very good post. I’m experiencing some of these issues as well..