- This topic has 18 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hi,
I am trying to create a sticky mobile menu that includes a CTA button aligned right of the menu.
In this case I would also need the burger menu to be positioned to the left of the site logo and everything to be aligned and look good on mobile.
Right now I am having trouble figuring this out.
So far, I have added the button and CSS to hide on desktop, but it seems to be hiding it on mobile too?
Any help would be appreciated.
Customer Support
Hi there,
1. Add your CTA Button using a Block Element:
https://docs.generatepress.com/article/block-element-hook/
1.1 Use the
menu_bar_itemshook.
1.2 Set the Display Rules toEntire Site1.3 Use a GenerateBlocks Button block, as it has more styling controls, and in Advanced > Additional CSS Class(es) add:
hide-on-desktop hide-on-tablet cta-buttonto remove it from those screen sizes.Once thats done, let me know and ill take a look at the CSS to make the layout changes you want.
All done!
Hey, added all the code, how do I finesse it?
Customer Support
Hi Dax,
Are you adding the button block into a WP column block?
If so, can you make sure there’s only this GB button block in the block element as the column block makes the alignment difficult?
Let me know!
Hey,
I’m slightly confused….do you mean have the button in a single column? It allows me to place it in a group or column?
Hi again,
I think I’ve removed the columns now, but still seems misaligned on mobile? Is there some code to add?
PS also how do I make the font white and not black?
Thank you
Where do i see this ?
Hi,
Please see link attached.
It’s on mobile version only.
Try this CSS to position the menu to the left:
.main-navigation .menu-toggle { order: -1 !important; margin-left: 10px; } .main-navigation .cta-button { margin-right: 10px; }The button, as its a GB Button you can style that in the editor
That worked perfectly, thank you.
And how can I change the colour of the text? I’m changing it in the button editor making the text white, but it appears black on the front end – I’m confused.
I must be missing something?
Additionally, is it possible to have all of the items – logo, menu and CTA responsive and on one line? Right now they are stacking and it looks awful.
Thank you
And how can I change the colour of the text?
The theme style for menu bar item links overrides the button style, try adding this CSS:
.main-navigation .menu-bar-items a.cta-button { color: #ffffff; }Additionally, is it possible to have all of the items – logo, menu and CTA responsive and on one line?
Try adding this CSS:
@media(max-width: 768px) { .inside-navigation.grid-container { flex-wrap: nowrap; } }Hi again,
The first code worked….
The second has made the button margin-less etc?
The second has made the button margin-less etc?
The second code makes sure that all the elements in the navigation won’t wrap to the second line on mobile.
It does what has to be done to ensure they don’t wrap 🙂
- You must be logged in to reply to this topic.
