[Resolved] How can I do this…

Home Forums Support [Resolved] How can I do this…

Home Forums Support How can I do this…

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1351800
    Ben

    Hey Guys,

    Please take a look at this little video: https://sitra.org/wp-content/uploads/2020/07/trim.B47B116F-4DE8-4B52-B8A5-D0FF20619524.mov

    Is there a way to add a button in the mobile sticky menu like this?

    I own that site but I’m changing theme to generatepress and I really need eith that functionality or the ability to have a button CTA visible at all times. Hopefully without the use of a plugin.

    Thanks

    #1351917
    David
    Staff
    Customer Support

    Hi there,

    you can add your button html ( or shortcode ) for example:

    <a href="#">Button</a>

    inside the Mobile Header using a Hook Element and selecting the inside_mobile_header hook.

    Note: this the mobile-button class will be our CSS selector.

    The use this CSS to hide it on static navigation:

    .mobile-header-navigation:not(.is_stuck) .mobile-button {
        display: none;
    }

    It will need some other CSS to position it – i would need to see the GP site setup to advise on that.

    #1365208
    Ben

    Hi,

    Sorry for the late reply on this.

    That’s worked. Just need a bit of help positioning the button and the menu if you don’t mind?

    https://renovationrates.co.uk/

    Thanks a lot.

    #1365353
    David
    Staff
    Customer Support

    Are you wanting a logo there?
    If so can you add on in Customizer > Layout > Header –> Mobile Header

    #1365430
    Ben

    Hi, no the logo will take up too much room. I just need the elements aligning nicely if you can help?

    #1365456
    David
    Staff
    Customer Support

    Try this CSS to fix the alignement. And it will display logo when static and button when sticky

    .mobile-header-navigation a.mobile-button {
        margin: 5px auto 5px 5px;
    }
    
    .mobile-header-navigation:not(.is_stuck) a.mobile-button,
    .mobile-header-navigation.is_stuck .site-logo.mobile-header-logo  {
        display: none;
    }
    #1365542
    Ben

    Thanks, but how can we fix the layout?

    #1365550
    David
    Staff
    Customer Support

    I forgot to say.
    Edit the button in your Hook.

    So it includes the mobile-button class eg. <a class="button mobile-button"

    #1366479
    Ben

    That, sir, has worked perfectly.

    Thanks so much for you help.

    Generate Press and the support you guys give is FANTASTIC!

    #1367496
    David
    Staff
    Customer Support

    Glad to hear that = and happy to be of help

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