[Support request] Sticky mobile menu adding button

[Dax]

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.

[David]

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_items hook.
1.2 Set the Display Rules to Entire Site

1.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-button to 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.

[Dax]

All done!

[Dax]

Hey, added all the code, how do I finesse it?

[Ying]

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!

[Dax]

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?

[Dax]

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

[David]

Where do i see this ?

[Dax]

Hi,

Please see link attached.

It’s on mobile version only.

[David]

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

[Dax]

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?

[Dax]

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

[Ying]

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;
}
}

[Dax]

Hi again,

The first code worked….

The second has made the button margin-less etc?

[Ying]

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 🙂

[Author]

Posts