[Resolved] Tablet page header issue

Home Forums Support [Resolved] Tablet page header issue

Home Forums Support Tablet page header issue

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #703516
    Lynn

    Hello,

    I’m still using 1.6.2 as the plugin hasn’t updated and doesn’t show an update.

    My question concerns how the logo shows up on a tablet. Basically the logo floats to the right. This works well on desktops and on mobile (phone). On tablet, in this case iPad, the logo is more towards the centre. I imagine it’s because of some custom css for mobile positioning that I used – as follows

    #mobile-header .site-logo {
    position: absolute;
    left: calc( 130px); /* 50% from the left – half your image width */
    }

    Is there a way that I can get the logo to float right on tablet as well as elsewhere?

    Thank you.

    #703626
    Leo
    Staff
    Customer Support

    Hi there,

    First of all I would highly recommend updating the premium plugin. Make sure auto update is activated:
    https://docs.generatepress.com/article/updating-gp-premium/#activating-updates

    As for the mobile header logo CSS, remove what you have and try this instead:

    #mobile-header .site-logo {
        order: 2;
        margin-left: auto;
        margin-right: 0;
    }
    .mobile-header-logo #mobile-header .menu-toggle {
        order: 1;
    }

    Let me know πŸ™‚

    #704504
    Lynn

    Hi Leo,

    Thanks for the code you suggested and for your quick reply. I did try it in Additional CSS in the Customizer. In the previews within GeneratePress it worked quite well. However, on my iPad, in vertical orientation, the logo and the menu when opened moved so far to the right as to be totally off screen. I must say that my iPad is very old and this may be an issue. Any other suggestions?

    I do have one other issue. That is, when viewing the site on my android phone in horizontal orientation, when I open the menu I am unable to scroll down to see all parts of the menu. I have experienced a similar issue on other sites in which I have used GeneratePress. Is there a way to fix or deal with this?

    Lynn

    #704625
    Leo
    Staff
    Customer Support

    I’m still seeing your original code added:

    #mobile-header .site-logo {
        position: absolute;
        left: calc( 130px);
    }

    Can you try removing it? Don’t think you need that.

    As for the second issue, I would recommend our slideout navigation as you have many menu items:
    https://docs.generatepress.com/article/activating-slide-out-navigation/

    #704685
    Lynn

    Yes, when I saw that the new code caused the logo and menu to go right off the iPad screen, I removed it and put the original back. I can take it off and put the new code back if you want to see what happens.

    And yes, I will take a look at the slideout navigation.

    Thanks Leo.

    #705234
    Leo
    Staff
    Customer Support

    I’m still seeing the old code being added.

    Will need to see without it.

    Let me know πŸ™‚

    #705293
    Lynn

    Hi Leo,

    I removed the old code and added your code.

    Lynn πŸ™‚

    #705322
    Leo
    Staff
    Customer Support

    I don’t see any issues now?

    Checked using browser resize and my iPhone.

    #705357
    Lynn

    Yes, no issues using browser resize or my Samsung Galaxy AS5 phone. But I also have an old iPad OS version 8.4.1. On it, in vertical orientation, the logo is off the screen on the right and the the menu, when clicked open, also goes off the screen on the right. Wondering if it is doing the same on other iPads.

    #705385
    Leo
    Staff
    Customer Support

    Just checked on my super old iPad OS version 9.3.5 and not seeing the issue as well.

    Not as old as yours though but I wouldn’t really worry about it.

    #705402
    Lynn

    Ok, thanks Leo. Have a good rest of the day.

    #705407
    Leo
    Staff
    Customer Support

    No problem!

    You as well πŸ™‚

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