[Resolved] How can I move the menu above Top Bar for mobile

[Charles]

I’m implementing a design that has 4 columns of content in the Top Bar for desktop (and probably tablet will work as well). The columns contains a logo, site description text, twitter feed, and a map. It doesn’t make sense to have all of this above the menu in mobile view.

How can I change the order of the header hooks for mobile?

Charles

[Leo]

Hi there,

Are you able to provide a link to the page in question?

You can edit the original topic and use the private URL field.

[Charles]

Here’s a jpg of the layout build: website.

The menu will have to move to the top of the page on mobile.

[Leo]

Hmm what about the top bar content?

It will shrink down to one column?

Can you link us to the site so we can provide the best possible solution?

[Charles]

It’s in xampp at the moment so I can’t give you a URL. I have redone the jpg to give more of an impression of what I mean. Please check it again here.

Is it possible to switch header.php in a child theme based on screen size? If I can create separate header.php files for the 3 main formats (desktop, tablet and mobile) I can move the layout in the header around

I was thinking of using this detect device to determine if the user is desktop, tablet or mobile and then do something like this:

$(document).ready(function(){
  if(deviceDetector.device == 'desktop')
    // You're on a desktop.
    include 'header.php()';
  else{
    if(deviceDetector.device == 'tablet')
      // You're on a tablet.
    include 'get_header( "tablet" )';
    else
      // You're on a phone.
    include 'get_header( "mobile" )';
  }
});

And then create header-tablet.php and header-mobile.php.

Will this work in the child theme or will the parent header.php override it?

Charles

[Tom]

Moving things using javascript is usually a last resort – it’s not great UX.

How are you adding the SERRA image currently?

It may be best to add it twice, once before and once after the menu. Then hide each one on desktop and mobile respectively.

[Charles]

Moving things with js is also a pain and takes a lot of work so I’d rather not do that, thanks Tom.

Currently I have a custom widget block with columns of CSS. (I always install the Widget Content Blocks plugin so I can code a widget block.) The SERRA logo and the map are in the media gallery (but they can just as easily not be and linked to an images folder). In Top Bar I have the Header title (as text so I can absolute position it) and the Header custom widget block (the columns of CSS).

Hiding the content with CSS is a great idea. The only thing is, if I’m correct, that won’t work using the Header or Top Bar widgets, will it?

Thanks
Charles

[Tom]

I think it should be possible to use CSS.

You could add the image in the After Header hook in GP Hooks like this:

<div class="hide-on-desktop">
    <img src="URL TO WEBSITE" alt="" />
</div>

Then we’d just have to add some CSS to hide the top image on mobile. I would have to see the site to know the selector to use.

[Charles]

I just tried moving the Top Bar off screen using this CSS and it works:

.top-bar.top-bar-align-right {
     position: absolute;
     left: -999em;
  } 

What is the exact breakpoint (pixel width) where the menu changes to the mobile one?

Is there an After Header widget block? I see “Header” and “Top Bar” but no “After Header”.

Charles

[Tom]

The mobile menu initiates at 768px.

There’s no widget area there, but you can use a plugin like this to turn a widget area into a shortcode: https://en-ca.wordpress.org/plugins/widget-shortcode/

Then you can add the shortcode into the After Header hook in GP Hooks.

[Charles]

I’ve got it working the way I want now. Thanks Tom for your excellent support.

Charles

[Tom]

You’re very welcome! 🙂

[Author]

Posts