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.

Easy Elementor Centered Logo Header!

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

Easy Elementor Centered Logo Header!

Place that link in <img> tags

<img src='https://elementorcodes.com/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'.

Easy Elementor Centered Logo Header!

Give the section containing the nav menu the CSS Class ' centralheader ', and a z-index of 999

Easy Elementor Centered Logo Header!

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.

Easy Elementor Centered Logo Header!

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;
}

/* 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;
}

.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.

Easy Elementor Centered Logo Header!

Also adjust the min-height for mobile devices

Easy Elementor Centered Logo Header!

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($){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 40) { //change this value here to make theg logo change size at your desired scroll location.
$('.logocentral').addClass('smallernow');
} else {
$('.logocentral').removeClass('smallernow');
}
});
});
});
</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.

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

x

Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!

present

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

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