- This topic has 5 replies, 2 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
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.g3. 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?
Customer Support
Hi there,
you can use the
menu_bar_itemshook 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 CSSThanks 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!
- You must be logged in to reply to this topic.
