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

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

Home Forums Support How to have a seperate primary navigation menu?

  • This topic has 9 replies, 4 voices, and was last updated 4 weeks ago by Fernando.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2275901
    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?

    #2275945
    David
    Staff
    Customer Support

    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

    #2277659
    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?

    #2278081
    Leo
    Staff
    Customer Support

    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/

    #2278394
    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, 🙂

    #2278847
    Fernando
    Customer Support

    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.

    #2283238
    roy

    Is there anyway to get it on one line?

    #2283244
    Fernando
    Customer Support

    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;
        }
    }
    #2285113
    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!!

    #2285539
    Fernando
    Customer Support

    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!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.