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

Beautiful, it works great! Thank you for the very detailed tutorial!

One little thing, how would I offset the logo upwards?

Thank you so much, Kharis! You’re the best!

Hello there,

Adjust the value of these lines:

margin-bottom: calc(-50% + 24px);
margin-bottom: -moz-calc(-50% + 24px);
margin-bottom: -webkit-calc(-50% + 24px);

Regards,
Kharis

Thanks for your help, Kharis! ??

You are always welcome here !

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis!

This is a very detailed and thorough tutorial, but I seem to be having some trouble. My menu items are centered but they are still gathered in the center rather than giving space for the logo. I have not inserted it yet, but I am assuming that they will make space when this happens. ]

My second question is how do I insert the logo? Once I have uploaded the picture of the logo how do I go about putting it where the #logo is in the script?

Thank you for the awesome help!

Hi Kharis (@kharisblank)

Thank you so much for sharing this. This is very detailed and clearly mentioned tutorial.
I have some questions.
1. How to increase block size.
2. How to change block background color, font and size.

Here is How I resolved this.

.site-logo-middle-menu{
    padding: 17px 8px!important;
    margin-top: -30px!important;
    width: 100px!important;
    background-color: #2a5b61!important;
    height: 80px!important;
    font-size: 20px!important;
    line-height: 24px!important;
} 

Thank you for the awesome help!

• This reply was modified 7 years, 8 months ago by khanishan.

Hello @khanishan,

Try adding the following CSS code:

.site-logo {
  max-height: 200px;
}

#mainnav ul li a {
  font-size: 20px;
}

.site-header {
  background-color: #fff000;
}

.site-header.float-header {
  background-color: #ff0000;
}

Not sure I suggested the correct code though. Please elaborate what you mean by “block” here.

Regards,
Kharis

Hi Kharis,

I used your code to center the logo (image) and create a ‘split menu’. I also changed the main and sticky header to semi-transparent etc. This all however only works when I have selected headertype to ‘full screen slider’ and/or ‘ímage’.
When I select ‘no header -only menu’-what I want-, all customizations don’t work. Background is black again, there is no split menu anymore.
1. How to fix that?

2.With your code when its working (headertype set to ‘full screen slider/image’), there is no logo showing in mobile/tablet view, only the hamburger. How to fix this?
And

3. I want the logo on mobile to the left and the hamburger to the right.

Thank you in advance

Hello there,

> 1

How did you customize it? What code did you insert? Could you please share the link to your site, so I can have a look?

> 2

Replace this line:

$('.site-header .col-md-4 > a').remove();

with:

$('.site-header .col-md-4 > a').css('display', 'none');

Then, from Appearance > Customize > Additonal CSS, add this CSS code:

@media only screen and (max-width:1024px) {
  
  .site-header .col-md-4 > a {
    display: block !important;
  }
  
}

> 3

Add the following custom CSS code:

@media only screen and (max-width:1024px) {
  
  .header-wrap .col-md-4 {
    text-align: left; 
  }
  
  .site-header .container {
    position: relative;
    height: 90px;
  }
  
  .header-wrap .col-md-4,
  .header-wrap .col-md-8 {
    position: absolute; 
    height: 80px;
  }  
  
  #mainnav-mobi {
    top: 100%;
  }
  
  .btn-menu {
    float: right;
    margin-right: 10px;
    margin-top: 20px;
  }
  
}

Regards,
Kharis

Hi Kharis, thanks for your respons, I will have a look at it gladly.
I think I made very unstructured css to get the menu as close as I want (especially in mobile view very hard). But I think I didn’t use the right css-selectors.

I can give you a link of the testsite, but there is a login (-this is own server from the company I work), I cannot give username/password when there’s no option for a private message unfortunately? When there is I can provide.

But I will put here the css I used. And screenshot, so you’ll have an idea.
For now I just have set the ‘sydney-hero-area’tot display:none. So that the menu works.

Thank you and regards,
Esther

.site-logo {
  max-height: 179px !important;
}

.site-header.fixed.float-header .site-logo{
  max-width: 180px !important;
 }

.site-header.fixed.float-header .site-logo-middle-menu {
top: -27px;
}

.site-header.float-header {
padding:5px;
}

#mainnav ul {padding-top:20px;}

.site-header.fixed.float-header #mainnav ul{
padding-top:0px !important;
}

#mainnav ul li a {
	letter-spacing:1px;
text-shadow: 1px 1px 6px rgba(35,40,45,0.7);
}
#mainnav ul li a:hover{
color:#0080ff !important;
text-shadow:none !important;
}
#mainnav ul > .current-menu-item a {
color:#0080ff !important;
text-shadow:none !important;
}

.site-header.fixed.float-header #mainnav ul li a {
font-size:15px !important;
}

#mainnav > ul > li > a {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
@media screen and (min-width: 1025px){
.site-header.fixed.float-header {
opacity:0;
animation:mySlide 1s linear 1s forwards; 
}
@keyframes mySlide {
  from {opacity:0}
    to {opacity:1}
}
}
.site-header.fixed.float-header {  
    
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#80ac7d+0,80ac7d+1,00537b+100&1+0,0.55+100 */
background: -moz-linear-gradient(-45deg, rgba(128,172,125,1) 0%, rgba(128,172,125,1) 1%, rgba(0,83,123,0.55) 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(128,172,125,1) 0%,rgba(128,172,125,1) 1%,rgba(0,83,123,0.55) 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(128,172,125,1) 0%,rgba(128,172,125,1) 1%,rgba(0,83,123,0.55) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ac7d', endColorstr='#8c00537b',GradientType=1 ) !important; /* IE6-9 fallback on horizontal gradient */
}

@media only screen and (max-width:1024px){
#masthead {
height: 60px;
}
}

@media only screen and (max-width:1024px){
.site-header{
position:fixed !important;
background-color:transparent !important;
top:32px;
}
}
@media only screen and (max-width:1024px){
.site-header.fixed{
position:fixed !important;

}
}
@media only screen and (max-width:1024px){
.site-header.fixed.float-header{
position:fixed !important;
top:0px !important;
}
}
@media only screen and (max-width:1024px){

  .header-wrap .btn-menu{
    float: right;
    margin-right: 30px;
    margin-top: -75px;
  }  
  
  .site-header .col-md-8 {
      position: absolute;
      top: 78px;
      left: 0;
  }  
.site-header .header-wrap .col-md-4  {
position: absolute;
top:1px;
left:0px;
margin-bottom:0px;

}  
}
@media only screen and (max-width:1024px){
.site-logo {
max-height: 110px !important;
margin-top:0px !important;
}
.site-header.fixed.float-header .site-logo{
  max-height: 70px !important;
float:left;
 }
}

menu-mobile1
mobile-menu2
desktop-menu1
desktop-menu2
tabletmenu-wrong

I can give you a link of the testsite, but there is a login (-this is own server from the company I work), I cannot give username/password when there’s no option for a private message unfortunately? When there is I can provide.

Please move to support forum, so we can assist you in better way.

Regards,
Kharis