Easy Elementor Centered Logo Header!
No extra plug-ins required! Elementor Pro Required.
This is how you can easily create a header navigation menu with a centered logo in the middle of the menu items.
To begin with, go into WordPress and create a new menu. Before adding items, change the Screen Options to enable CSS Classes.
Then, add your items, and in the middle item, give it the class ' logocentral ' and in the 'Navigation label' area, enter the link to your logo.
To get the link to your logo, simply go in the media library, open the file, and it is right here
Place that link in <img> tags
<img src='https://element.how/wp-content/uploads/2019/09/logoflex.svg'></img>
Now, back in Elementor, in your header template, create a new section and place the nav menu element in it. Set the Align option to 'Stretch'.
Give the section containing the nav menu the CSS Class ' centralheader ', and a z-index of 999
Finally, add this CSS in the Header Settings Advanced field
If you want a fixed header at the top though, as in the example on this page, keep reading.
Gear icon in the lower left gets you to the header settings.
no used yet , option for sticky from elementor
<style>
.logocentral{
width: 130px;
transition: all .4s ease;
}
.elementor-sticky--active .logocentral{
width: 74px;
}
.elementor-nav-menu>li {
align-self: center;
}
</style>
.logocentral {
width: 74px;
/*adjust this value to your preferred size */
}
.elementor-nav-menu>li {
align-self: center;
}
.elementor-nav-menu a, .elementor-nav-menu li {
flex: 1 1 0;
justify-content: center;
}
/* remove logo from mobile menu */
@media (max-width: 767px) {
.elementor-nav-menu .logocentral {
display: none;
}
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
margin-top: 0;
}
.elementor-nav-menu--main .elementor-nav-menu a,
.elementor-nav-menu--main .elementor-nav-menu a.highlighted,
.elementor-nav-menu--main .elementor-nav-menu a:focus,
.elementor-nav-menu--main .elementor-nav-menu a:hover {
padding: 4px;
}
If you want your header to be fixed at the top of the page with the logo changing size when scrolling down, keep reading and use the code below instead
Create another section in your header template, above every other sections, and give it these settings. Adjust the min-height to the height of your fixed header.
Also adjust the min-height for mobile devices
Then, add all of the code below in an html element in a section set to 'no gap' at the bottom of your header
I added comments in the code so that you can adjust to your preference.
<style>
.logocentral {
width: 110px;
/*adjust this value to your preferred size before moving down the page*/
transition: all .4s ease;
}
.smallernow {
width: 18px;
/*adjust this value to your preferred size after moving down the page*/
}
.elementor-nav-menu>li {
align-self: center;
}
/* remove logo from mobile menu */
@media (max-width: 759px) {
.elementor-nav-menu .logocentral {
display: none;
}
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
margin-top: 0;
}
.centralheader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
}
.elementor-nav-menu--main .elementor-nav-menu a,
.elementor-nav-menu--main .elementor-nav-menu a.highlighted,
.elementor-nav-menu--main .elementor-nav-menu a:focus,
.elementor-nav-menu--main .elementor-nav-menu a:hover {
padding: 4px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('.logocentral').addClass('smallernow');
} else {
$('.logocentral').removeClass('smallernow');
}
}
mypos = mywindow.scrollTop();
}); }); });
</script>
Important: this does not use the Elementor Pro Sticky options. It is made sticky at the top by using CSS, and this allows for a smoother animation. (No 'jumping'). For this reason, it will only work for headers that are at the top of the page to begin with, not those that sticks at the top after you reach them. This tutorial can be made to work with these also, but then the code required is different.
