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

Positioning CTA button at the bottom of the slide out menu

  • YEAR93
    March 31, 2024 at 11:24 am

    Hello,

    I’ve added a CTA button to the slide-out menu by using the hook generate_after_slideout_navigation. Is it possible to position this button at the bottom of the slide-out menu? If so, how can I achieve this?

  • Alvind
    March 31, 2024 at 10:54 pm

    Hello there,

    I just looked at your menu, and the button is correctly positioned at the bottom as you wanted. Is that correct?

  • YEAR93
    April 1, 2024 at 4:39 am

    Hello,

    This is occurring because of the other elements in the slide-out menu, such as the menu and logo, which are pushing the CTA button down. The CTA button starts right after the menu items in the slide-out menu. My intention is for it to always remain fixed at the bottom.

  • David
    April 1, 2024 at 8:13 am

    Hi there,

    it is possible:

    1. add this CSS to the Site:

    
nav.slideout-navigation .inside-navigation {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}

    What this will do is force the inside container to fill the height of the screen and apply a flex column.

    2. Then edit the element hook, and place the CTA button in its own Container block after the other content.
    And set its Spacing > Margin Top to auto
    You can add padding etc to the Container block

  • YEAR93
    April 2, 2024 at 6:46 pm

    This worked thank you!

  • David
    April 3, 2024 at 3:18 am

    Glad to hear that

  • YEAR93
    April 3, 2024 at 8:01 am

    I have one more question. Where can I change the color for this element .slideout-navigation, .slideout-navigation a?

  • Ying
    April 3, 2024 at 9:23 am

    customzier > colors > off canvas panel > navigation text.

  • YEAR93
    April 3, 2024 at 2:01 pm

    This works, but it makes the list items white too. That’s not what I want. Only the content below should be white. I’ve added the white color to the button block, but it still remains, instead of ignoring the black color assigned to this class .slideout-navigation, .slideout-navigation a.

  • Ying
    April 3, 2024 at 2:17 pm

    Can I see the section in question?

  • YEAR93
    April 3, 2024 at 3:47 pm

    Yes, I’m referring to the social icons at the bottom inside the brown section of the slide-out menu when viewed on mobile.

  • Ying
    April 3, 2024 at 4:38 pm

    Try adding this CSS:

    #generate-slideout-menu .gb-button {
    color: #fff;
}
  • YEAR93
    May 7, 2024 at 3:29 am

    This worked, thank you! One more question: on mobile, the Safari bottom bar overlaps the information at the bottom of my slide-out menu. Could this be a fix: https://web.dev/blog/viewport-units

  • Ying
    May 7, 2024 at 8:50 am

    Can you provide a screenshot for the issue?

  • YEAR93
    May 7, 2024 at 10:47 am

    I’ve added screen recording.

  • Ying
    May 7, 2024 at 5:29 pm

    Can you try this css?

    nav.slideout-navigation .inside-navigation {
    flex-wrap: nowrap;
}
Viewing 16 posts - 1 through 16 (of 17 total)
1 2
  • You must be logged in to reply to this topic.