carlblanchet on "[Theme: Sydney] How to put the logo in the middle of the menu?"

Dear Carl,

Thank you for reaching out to us here.

In order to achieve that objective, please try to do the following steps:

1. Log into your site admin area
2. Go to Appearance > Customize > Header area > Menu style > Menu style > enable "Centered (menu and and site logo)" > Save
3. Navigate to Appearance > Menus
4. Edit your current active primary menu
5. Create a new custom links menu item. In the URL field, enter #logo. In the "Navigation Label" field, put any text of your choice, e.g. your site name. Then place it in the middle of other menu items. Please see this screenshot for the sake of visual https://cloudup.com/cmuBtqTLfkD
6. Install and activate the Header and Footer Scripts plugin
7. Go To Settings > Header and Footer Scripts panel
8. Paste the following to the "Scripts in header:" box:

<style type="text/css">
.site-logo-middle-menu{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px;
}
.site-logo-middle-menu > a{ position: absolute; z-index: 999; margin-bottom: calc(-50% + 24px); margin-bottom: -moz-calc(-50% + 24px); margin-bottom: -webkit-calc(-50% + 24px);
}
</style>

9. Paste the following code into the provided "Scripts in footer:" box:

<script type="text/javascript">
jQuery(function($) { var middleMenu = $('a[href="#logo"]'); var logo = $('.site-header .col-md-4 > a').html(); if ( matchMedia( 'only screen and (min-width: 1025px)' ).matches ) { if(middleMenu.length){ middleMenu.parent('li').addClass('site-logo-middle-menu'); $('.site-header .col-md-4 > a').remove(); middleMenu.html(logo); } } if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) { middleMenu.parent('li').remove(); }
});
</script>

10. Save settings

You would clear your web browser's cache before reloading your site.

Let me know how it goes. I'll wait to hear back from you regarding your stats.

Regards,
Kharis

- - , .
.