Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Navigation Menu on Mobile Device

  • Hi!

    My navigation menu looks great on the desktop.
    It’s a disaster on the mobile device (including the Top Bar Element).
    I can not even imagine how to fix it.

    Any help? The link is below.

    Thanks,
    Ces

  • Hi Ces,

    Can you try disabling caching/optimization plugins? The issue seems to be coming from something of that sort of functionality.

  • Believe it or not, I do not have any extra plugins in this project. I only have the Generation Blocks in my plugins, plus Yoast (to help me duplicate posts) and Akismet.

    I have two major websites where I used Generation Pro for my theme. I have not had as much trouble as this since using Generation Blocks. I’ve wasted so many hours just to fix almost everything every step of the way. I want my Generation Pro back!

    Thank you.
    Ces

  • Hi there,

    Strange indeed – we haven’t had any other reports on this though so I’d assume something is happening to your specific install.

    We will need to go through some proper debugging steps in order to identify the culprit.

    Do you have a staging site where you can keep all custom CSS, functions and plugins disabled?

    Let me know 🙂

  • I created a devdebug site for you – and adding a User name for you.
    What email of yours should I use? It’s asking for one to create User.

    Thanks,
    Ces

  • YOu can use [email protected]

    Please make sure all plugins and custom functions/CSS are disabled as well.

    Thanks!

  • That whole devdebug2 is all yours to work with.
    The plugin is only Generate Blocks.
    You can see the custom CSS – and you can disable them as you wish.

    Thanks,
    Ces

  • You can see the custom CSS – and you can disable them as you wish.

    This isn’t something we can do – can you please disable them first and see if that happens to resolve the issue?

    If it doesn’t, then leave the CSS disabled for us to take a look.

  • Hi!

    Ok! I do not know how to disable my additional CSS – so I just took them out (and pasted them on a text doc for retrieval if I need them. Doesn’t look like I do!
    .
    The site on the desktop is generally ok. I need to do some more fine-tuning (like why are “Comments” to the Post or Page are showing up (at the bottom of the page) when I unchecked them in the settings?)

    But please check how the header looks in the mobile device. It’s all crunched up.

    Appreciate your help.
    Ces

  • Hi Ces,

    Here’s an article with regards to Comments: https://docs.generatepress.com/article/removing-comments/

    With regard to the Header, is there any reason why you’re using a Block Element to build it?

    It seems like a fairly simple Header.

    Just create a Block Element to add the Social icons. Aside from that, just build the Header from the default header.

  • Hi!

    I did do as you suggested. Created the Header as the theme offers (putting the logo in its location) and created a Block Element for the Social icon and Search bar for the right side of the Header.

    It worked perfectly fine on the desktop. But not on mobile. Everything is all crunched up, including the Navigation Bar.

    Is there any help on this one?

  • Try adding this through Appearance > Customize > Additional CSS:

    nav#mobile-header span.menu-bar-item a, nav#mobile-header  .menu-toggle {
        padding: 0;
    }
    
    nav#mobile-header .site-logo img{
        height: 100px;
    }
    nav#mobile-header .site-logo {
        height:unset;
    }
  • Sorry. It did not work.
    It just made the orange Navigation Bar wider to hold the logo.

    Please check on your mobile device – not on the mobile device preview on the desktop. It’s very different on the actual mobile device itself.

    Thanks,
    Ces

  • The code is working from my end. This is how it’s looking right now: https://share.getcloudapp.com/bLulPXj8

    How would you like it to look exactly on mobile?

  • Please look at the header on the desktop:
    https://acdems.sitedistrict.com/

    The logo is horizontal, not round. And it is not on top of the orange background of the Nav bar.

    On the mobile – I expect those header items (logo, social icons, search bar, Menu) to line up vertically on the screen of the mobile. That’s what all my previous Generate Press websites do.
    Why not this one?

    Thanks,
    Ces

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