[Resolved] Mobile header with text

Home Forums Support [Resolved] Mobile header with text

Home Forums Support Mobile header with text

  • This topic has 10 replies, 3 voices, and was last updated 2 years ago by Leo.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #919924
    Nacho

    Hello Tom, David and Leo,

    I’ve been trying to get a mobile menu so that you can have the logo top left and the phone number top right and the menu button below those centered like when you don’t have the mobile menu active and you see it in your phone.

    To make more sense I’m trying to get a mobile header like the one in the url of this post.

    Thanks a lot guys.

    #919960
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    I need to see what you currently have to provide some suggestions on how to achieve that layout.

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #920202
    Nacho

    Good morning Leo,

    Sure, I’ve just put the url in the topic so you can see it.

    Right now I don’t have the mobile menu active since I thought that maybe the customization could come from other part.

    Let me know.

    Thanks.

    #920758
    Nacho

    Hello Leo,

    I was also wondering if you guys recommend using already Gutenberg with GP.

    Thanks a lot Leo.

    #920763
    David
    Staff
    Customer Support

    Hi there,

    could you provide the link to the site you want to match, just in a new reply, so we have both URLs to review.

    We like Gutenberg, it’s not up to the standards of a pagebuilder but is great for creating posts. I would give it a try to see how you get on. As a note: Install the Gutenberg Plugin as this will bring the Editor up to the latest version with the add-ons and bug fixes.

    #920765
    Nacho

    Hello David,

    Yes, here is the URL of the site https://cca.com

    What do you mean by “Install Gutenberg Plugin”? Install first the Gutenberg Plugin and then update to the latest version of WordPress? or GP has a plugin?

    Thanks a lot.

    #920850
    Leo
    Staff
    Customer Support

    What if we add this with your current layout?

    @media (max-width: 768px) {
        .inside-header {
            display: flex;
            flex-direction: row-reverse;
        }
    }

    This is the plugin David mentioned:
    https://wordpress.org/plugins/gutenberg/

    #920961
    Nacho

    Hello Leo,

    It works but when seeing it on mobile the topbar lost the space on top and below the logo there is a lot of space. Is that fixable?

    Oh yes, I know that plugin. I was wondering if what he told me is that I had to install that plugin before upgrading to WordPress 5.

    Thanks a lot Leo.

    #920969
    Leo
    Staff
    Customer Support

    It works but when seeing it on mobile the topbar lost the space on top

    I’m not sure what you mean? The CSS provided shouldn’t change the top bar at all. It is also coming from Elementor.

    As for the space below the logo, try this CSS:

    @media (max-width: 768px) {
        .header-widget {
            margin-bottom: 0 !important;
        }
    }

    You can also reduce the header padding on mobile:
    https://docs.generatepress.com/article/header-padding/

    #921011
    Nacho

    Hi Leo,

    The topbar thing was my mistake since I have something set in the customizer for that.

    The logo thing works perfect.

    Thanks a lot for your help Leo.

    Have a nice day.

    #921012
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.