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.

GeneratePress GenerateBlocks

Button issue on mobile after nav item

  • zen_moves
    March 26, 2024 at 9:52 pm

    Hello, I have a complicated problem. The site link is in private info.

    Background:

    I added a CTA button to my nav and got some great CSS here to make it work across all devices. The CTA is a button set up as a Block-Hook generate_manu_bar_items and it appears above the Nav link on desktop and below on Mobile and Tablet. FYI, the CSS is:

    @media (min-width: 1025px){
    .inside-navigation.grid-container {
        flex-direction: column-reverse;
        align-items:flex-end;
    }
}

nav#mobile-header .site-logo.mobile-header-logo {
    margin-right: unset;
    order: -2;
}

nav#mobile-header .menu-toggle{
    order: -1 !important;
}

nav#mobile-header .menu-bar-items {
    width: 100%;
    line-height: 2;
    justify-content: center;
}

    The Problem

    I decided to increase the length of the text in the CTA. Still works fine on Desktop and Tablet. But on mobile the button does not increase in height to accommodate the text. Instead, the text wraps on top of itself (same line rather than the next line).

    I tried fixing it with the various options in the Editor. That didn’t work.

    I then figured that as a workaround, I can just have shorter CTA text on mobile. So I creating a new Block-Hook element, identical to the first one but with shorter text in the button (which would be for mobile only). I selected “Hide on desktop” and “Hide on tablet” on the Hook with the button with the shorter text, and “Hide on mobile” on the Hook with the button with the longer text. That does not work. With one Hook, the “Hide on…” selections work fine. With two Hooks, the “Hide on…” selections don’t seem to make any difference, so both buttons appear on all devices.

    What I’d like to do is either:
    1. Use one Hook and either a) make the text wrap to the next line on mobile with the button growing proportionately in height to fit the second line, or b) use different (shorter) text on mobile.
    or
    2. Use two Hooks, one for desktop and table with longer CTA text, and one for mobile with shorter CTA text. In this workaround, I’d just use shorter text CTA text on the one for mobile.

    Please help.

  • Alvind
    March 26, 2024 at 10:34 pm

    Hi there,

    How about this approach:

    Create two block elements, one for desktop and another for tablet and mobile. For the desktop block element, use the before_header hook to display it on top of the nav bar, and for the tablet/mobile block element, use the after_header hook. This way, you can have more flexibility in styling and responsiveness for all device views, and you won’t need to add custom CSS. Just make sure to toggle the appropriate ‘Hide on’ settings on each block element.

    I think that is the easiest way to approach this.

  • zen_moves
    March 27, 2024 at 4:58 pm

    Thank you, that was very helpful.

    I set up mobile and tablet with an after_header hook.

    For desktop, I had to keep the generate_manu_bar_items and CSS because I couldn’t figure out a way to get the logo flush left and button/nav flush right (with button above nav links) in the same bar.

    I’m thinking it might be better to structure the desktop version more efficiently with a different approach. What is the best way? I was thinking maybe using a before_header hook to put the logo flush left and button flush right, with the nav in it’s own bar underneath (with the nav links flush right. Is that the best way? Also, I want to do it in a way where I can keep these items (logo, cta button and nav links) stickied on top of the page in desktop view. {Maybe I’m overthinking it but I want the site as efficient as possible for quick loading.)

  • Alvind
    March 27, 2024 at 8:12 pm

    We can stick to the desktop approach I suggested earlier and address the issues you have regarding button alignment and sticky position.

    For button alignment, you can refer to this documentation to adjust the position of the button:
    https://docs.generateblocks.com/article/button-alignment/#multiple-button-blocks-in-one-row-with-alignment

    Now, let’s tackle the sticky issue. To proceed, let’s make some adjustments.

    Go to Customizer > Layout > Sticky Navigation and disable the sticky navigation.

    In Appearance > Elements, create a new header element with the merge option set to Merge on Desktop only, and set the location to the entire site. Use the current color background for the header background.

    Add the following CSS:

    .header-wrap {
    position: sticky;
    top: 0;
}

    Now, you probably notice that the page hero on the homepage is slightly covered by the header due to the merge. All you need to do is edit your homepage and adjust the top-padding value to include the height of your header, which is 105px.

    Let me know if you have any further questions.

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