Easily create a header with a central logo in-between menu items.

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.

Easily create a central logo header navigation! 4

Now 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

Easily create a central logo header navigation! 5

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

Easily create a central logo header navigation! 6

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

Easily create a central logo header navigation! 7

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.

Easily create a central logo header navigation! 8

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.

Easily create a central logo header navigation! 9

Also adjust the min-height for mobile devices

Easily create a central logo header navigation! 10

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>
jQuery(document).ready(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 >

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 *