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

Home Forums Support How can I move the menu above Top Bar for mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #480582
    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

    GeneratePress 2.0.1
    #480788
    Leo
    Staff
    Customer Support

    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.

    #481945
    Charles

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

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

    #482058
    Leo
    Staff
    Customer Support

    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?

    #482853
    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

    #483081
    Tom
    Lead Developer
    Lead Developer

    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.

    #483649
    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

    #483964
    Tom
    Lead Developer
    Lead Developer

    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.

    #484576
    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

    #485023
    Tom
    Lead Developer
    Lead Developer

    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.

    #485755
    Charles

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

    Charles

    #486105
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.