Docs

[marketinglaura]

I set up my logo as an in-line menu item and it worked perfectly. On mobile though, it’s showing “Logo” in the list and I’m wondering how to change that. Ideally, what I’d like is to have the actual logo show up above the hamburger menu and have the word “logo” not appear in the menu.

Thank you, as always, for the help!

[marketinglaura]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for posting in and the very detailed information. To resolve your issue and display a logo in your navbar on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .x-navbar .x-nav > li.logo-menu-item {
    display: none;
  }

  .masthead-stacked .x-brand {
    display: inline-block;
    float: none;

    text-indent: -99999px;
    text-align: left;
    width: 242px;
    height: 100px;
    background: url(http://newyorkcafe.net/wp-content/uploads/2016/09/NY-Cafe-Logo-Menu-2.png) no-repeat center center;
    background-size: contain;
  }
}

This should be the possible output:

Please let us know if this works out for you.

[marketinglaura]

Thanks! Tried this and it didn’t seem to do anything…

[Rad]

Hi there,

It will not work since the first @media query has no proper close bracket.

@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 242px;
        height: 100px;
        background: url(http://newyorkcafe.net/wp-content/uploads/2016/09/NY-Cafe-Logo-Menu-2.png) no-repeat center center;
        background-size: contain;
    }
	.x-colophon.top .h-widget, .x-colophon.top a, .x-colophon.top .widget {
color: white;
}
	.x-colophon.bottom .x-nav li a {
color: #fff;
}

Please change it into this

@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 242px;
        height: 100px;
        background: url(http://newyorkcafe.net/wp-content/uploads/2016/09/NY-Cafe-Logo-Menu-2.png) no-repeat center center;
        background-size: contain;
    }
	.x-colophon.top .h-widget, .x-colophon.top a, .x-colophon.top .widget {
color: white;
}
	.x-colophon.bottom .x-nav li a {
color: #fff;
}
  } /* this is the missing bracket */

@media(max-width: 979px){
  .x-navbar .x-nav > li.logo-menu-item {
    display: none;
  }

  .masthead-stacked .x-brand {
    display: inline-block;
    float: none;

    text-indent: -99999px;
    text-align: left;
    width: 242px;
    height: 100px;
    background: url(http://newyorkcafe.net/wp-content/uploads/2016/09/NY-Cafe-Logo-Menu-2.png) no-repeat center center;
    background-size: contain;
  }
}

Cheers!

[marketinglaura]

Works perfect, thanks so much!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts