Archived topic
Adding CTA Button to mobile sticky menu
5 replies · Started by Bill on October 30, 2021
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
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?
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
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!
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;
}
}That's perfect! Thanks David!
Glad to be of help!
