[Resolved] Trying to Fix the Mobile Menu and Mobile Featured image

[Samuel]

I have a test site up for a project I’ve been working on and I have two question:

1. When the site shrinks enough that the menu menu wraps I’d like a hamburger menu on the right and the logo to stay on the left. Now it moves the logo to the center and puts a Hamburger under it. How can I fix this?

2. I have some pages with a featured post and in the mobile view it looks like it’s trying to cover the enter background. instead I’d like the mobile to be much taller allowing the image to crop on the left and right if that makes sense. Being it’s scaling down so much the header is very small.

I’ve attached an example url that shows both things.

[David]

Hi there,

1.Enable the Mobile Header in Customizer > Layout > Header

https://docs.generatepress.com/article/mobile-header/

2. Edit the Header Element you have assigned to your single posts.

https://docs.generatepress.com/article/header-element-overview/

Beside Padding, select mobile and add larger top and bottom padding as required.

[Samuel]

When I select mobile header I do not see the options in the documentation. For example, there is no option to set the breakpoint.

My goal is to get the logo on the left (like on the main site) and a hamburger on the right. When I turn on mobile header with a logo all I get is this which doesn’t look right. The logo is too small and I cannot find out how to align things: https://www.dropbox.com/s/yd1g9cawue0farx/Screen%20Shot%202020-08-14%20at%209.48.22%20AM.png?dl=0

I am trying to make the mobil header look like this one: https://www.dropbox.com/s/489rz9b67ilxhik/Screen%20Shot%202020-08-14%20at%209.50.53%20AM.png?dl=0

Ideally the menu would slide in from the left and take the whole screen. Would it be better to use an off screen panel? If so how can I get it to look the desiring way and only show up on mobile?

[Tom]

Can you enable the Mobile Header so we can see why it’s not displaying properly?

The breakpoint option should display as long as you’re using the latest version of GP Premium. It may be worth refreshing the Customizer after the change is saved.

The Off-Canvas Panel should do what you’re after – you can set it to mobile-only: https://docs.generatepress.com/article/off-canvas-panel-overview/

[Samuel]

I enabled the mobile header so you can look at it. If you need an admin login just let me know.

[David]

Hi there,

in your child theme you have this CSS:

.main-navigation:not(.slideout-navigation) .main-nav,
#mobile-header .menu-toggle {
    order: -1;
}

Remove it as its placing the Menu toggle to the left.

Then edit the Customizer > Layout > Primary Navigation -> Menu item height – and set it to 60px.
This will increase both the menu items and the logo Height.

For the overlay enable Customizer > Layout > Off Canvas Panel –> Mobile only.
Edit your Menu and select the Off Canvas Location as well as the Primary Nav.

[Samuel]

Ok now I feel dumb 🤦🏻‍♂️ Those were the settings you had given me to try to off canvas menu that I did not remove.

I changed those settings and have two things I’d like to tweak:

Once I changed the menu item height to 60px the menu now sits a little low on desktop view. Is there a way to make it more aligned to the logo height?

One the mobile view how do I add some padding to the top to push the logo and menu down so it’s more entered in the header area?

[Tom]

Give this a shot:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }

    #site-navigation {
        margin-right: 0;
    }
}

Then, you can give the mobile header some padding like this:

#mobile-header {
    padding: 20px;
    box-sizing: border-box;
}

[Samuel]

Thank you!

[Tom]

No problem 🙂

[Author]

Posts