Mobile logo missing in CSS

HTML-CSS
1

www.sassco.co.uk

On the mobile site, the logo goes to the main menu, but is hidden unless you hit the hamburger.

I’ve managed to shift it so it appears in the blue bar, but it only shows when I hit the hamburger.

Any suggestions on how to keep it there permanently when on mobile?

Cheers.

2

The logo is inside the menu (#primary-menu ul) which gets hidden. You can move the logo out of the menu but that will require some changes.

<div class="menu main-menu menu-desktop show-menu-border">
  <!-- move up to here -->
  <img width="194" height="50" src="https://www.sassco.co.uk/wp-content/uploads/2019/07/main-banner.png" class="menu-image menu-image-title-hide" alt="">
  <ul id="primary-menu" class="menu menu-mobile" style="display: block;">
    ...rest
  </ul>
</div>

/* set the parent container to flexbox */
.main-menu {
  display: flex;
  align-items: center;
}

I would also set left: 0; on the mobile menu to make it full width.

@media screen and (max-width: 992em) {
  .main-navigation .menu .menu-mobile {
  /* other CSS remove for brevity */
  left: 0;
  }
}
3

Cheers. Where in the WP site would I put the

<div class="menu main-menu menu-desktop show-menu-border">
  <!-- move up to here -->
  <img width="194" height="50" src="https://www.sassco.co.uk/wp-content/uploads/2019/07/main-banner.png" class="menu-image menu-image-title-hide" alt="">
  <ul id="primary-menu" class="menu menu-mobile" style="display: block;">
    ...rest
  </ul>
</div>
4

That really depends on what type of control you have on editing the pages. Is it only in theme settings or a page builder or directly in the php files. How did you add the logo?

Also, I should note that what you really should move is the surrounding <a> element container and not just the image. Otherwise, you won’t be able to click the logo to get to the home page.

<a href="https://www.sassco.co.uk" aria-current="page" class="menu-image-title-hide menu-image-not-hovered">
  <span class="menu-image-title">Home</span>
  <img width="194" height="50" src="https://www.sassco.co.uk/wp-content/uploads/2019/07/main-banner.png" class="menu-image menu-image-title-hide" alt="">
</a>

I don’t think I can really help you with this as I don’t know what control and options you have for editing the page.

5

Cheers. Thanks for trying anyway. It’s the Menu Image plug in I used in WordPress and added the logo to the Home menu item to make it appear.

6

This plugin right? Unless there is some way you can add it to the .main-menu div above and not the #primary-menu ul you can’t really do much. Because it is adding the logo inside the menu which is a mobile nav that is hidden by default until you click the burger icon to open the menu.

If you are OK with the logo not being a link to the home page you can try this custom CSS. You will obviously have to remove the logo that the plugin inserts so it doesn’t interfere.

.main-menu::before {
  content: url(https://www.sassco.co.uk/wp-content/uploads/2019/07/main-banner.png);
  padding-right: 20px;
}

.main-menu {
  display: flex;
  align-items: center;
  /* if you want to center the nav/logo otherwise remove */
  justify-content: center;
}

Or you can try looking for a plugin that lets you add a logo to the header and not the menu.

7

That works excellent. Thanks. Surely there will be some way to hyperlink the logo to a URL such as the home page?

8

Not using the CSS technique I showed. It would be possible using JavaScript to insert HTML into the page but that is not really the right way to do it with WordPress. You can edit the theme PHP files or use a plugin which can “inject” code in the right place.

I’m really not much of a PHP or WordPress guy so I’m not sure I should be giving you advice on how to best go about getting the logo in the header. I’m sure I can figure it out but it’s definitely not something I can do without some digging around and testing.