[Resolved] Adding CTA Button to mobile sticky menu

[Bill]

Hello, I experimented with adding to add a CTA Button to mobile header according to these instructions and it worked great:

https://docs.generatepress.com/article/hooks-element-overview/

1. Create new Hook Element
2. Add your HTML for your button e.g

My CTA

3. In the Hook List select: inside_mobile_header

4. In Display Rules set this to the Entire Site and Publish.

5. In Customizer > Layout > Header activate Mobile Header and add your logo and Enable Sticky.

6. Then add this CSS which you can tweak the colors etc to suit:

#mobile-header .inside-navigation {
align-items: center;
}

a.custom-mobile-cta {
padding: 5px;
border: 1px solid #fff;
background-color: orange;
color: #000;
border-radius: 5px;
order: 4;
margin-right: 10px;
}

However, I don’t want to use the mobile header. I would like the button to show in the sticky menu. I do not see a hook for that. Is that possible?

[David]

Hi there,

you can use the menu_bar_items hook and then we can provide some CSS to hide it, so it only displays when the navigation is sticky. If you want to set that up i can then provide the CSS

[Bill]

Thanks so much David! I have it all working. 🙂 I only need help with two things:

First, as you can see in the first screenshot attached, the before sticky appears, the hamburger menu is on the left. How can I get it to align right?

Second, as you can see in the second screenshot attached, the sticky menu looks good, but the logo is a little too far too left. I can’t seem to figure out how to change that.

Thanks so much!

[David]

Try this CSS:

@media (max-width: 768px) {
     /* Reposition menu toggle */
    .main-navigation .inside-navigation {
        justify-content: flex-end;
    }
    .has-menu-bar-items button.menu-toggle {
        order: 3;
    }
    /* Adjust position of sticky logo */
    .sticky-navigation-logo {
        margin-left: 10px;
    }
}

[Bill]

That’s perfect! Thanks David!

[David]

Glad to be of help!

[Author]

Posts