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

Home Forums Support Trying to Fix the Mobile Menu and Mobile Featured image

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

    #1402272
    David
    Staff
    Customer Support

    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.

    #1402786
    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?

    #1403203
    Tom
    Lead Developer
    Lead Developer

    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/

    #1403303
    Samuel

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

    #1403737
    David
    Staff
    Customer Support

    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.

    #1404234
    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?

    #1404378
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1405496
    Samuel

    Thank you!

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