[Support request] How to have a seperate primary navigation menu?

[roy]

If you see on the desktop view of my site, at the top it says “Call a local Technician” but on mobile, it cuts it off and puts “Menu” there, I’d like it toonly show the “Call a local tech” part of it on mobile to make it easier, how would I be able to do this?

[David]

Hi there,

instead of add the ‘call a technician’ as a menu item.

Use a Block Element – Hook:

https://docs.generatepress.com/article/block-element-hook/

To add a Button block with your link, and set the Hook the menu_bar_items this will appear in the same place on Desktop and Mobile

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[roy]

I did that but now it’s not showing up properly on mobile, I’d like to remove the “Menu” all together on mobile, is that possible?

[Leo]

This CSS would remove the mobile menu toggle:

.main-navigation.has-branding .menu-toggle {
     display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[roy]

Ok, that worked! Now, would it be possible to adjust the button, maybe center it on the mobile view?

Thanks so much for the help, 🙂

[Fernando]

Hi Roy,

To center the button horizontally, here’s a CSS you may try adding through Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .menu-bar-items {
        width: 100%;
        justify-content: center;
    }
}

Kindly let us know how it goes.

[roy]

Is there anyway to get it on one line?

[Fernando]

It wraps at around screen sizes smaller than 315px. We can try reducing the font-size with this CSS to avoid this:

@media (max-width: 314px) {
    .gb-button-wrapper.gb-button-wrapper-2c79f5bd a {
        font-size: 13px;
    }
}

[roy]

Hey Fernando,

Sadly that didn’t work for me 🙁

I did change the width to 25%, so now it looks like it does.

Can we somehow get it all on one line without breaking anything?

Also, curious how we can move this button on desktop as well as mobile so there is still some red on the right side of the button so it doesn’t look like it’s smashed against the right side?

So sorry about all of this!!

[Fernando]

Right now, it’s only wrapping in two line on mobile. Try changing the font size for the button on mobile view. Example: https://share.getcloudapp.com/JruomLwY

Then, for your second inquiry, you can add Margins in the spacing section of the block settings of your Button.

Hope this helps!

[Author]

Posts