Archived topic

Hide a Button after Navigation on Tablet and Mobile

3 replies · Started by Andrew on March 13, 2023

Viewing posts 1–4 of 4

March 13, 2023 at 8:04 am #2566173

Hi -

I added the "Become a Member" button within my navigation using a Hook with the Hook Name "menu_bar-items".

Currently, the button shows until the width of the screen is 1024 or less. However, between my Mobile Break Point (1340 pixels) and 1024 pixels, it pushes my logo so the logo is off center.

I would like to have the button disappear at my mobile break point 1340 pixels so when the page breaks, the logo is centered. How can I do that?

Thank You!

March 13, 2023 at 11:13 am #2566366

Hi there,

add this CSS:

@media(max-width: 1340px) {
    .menu-bar-items .hide-on-tablet {
        display: none !important;
    }
}

It makes it so the hide-on-tablet class on blocks in the menu-bar-items will be hidden at the larger screen size.

Alternatively, if you want to keep the button on the tablet view, drop the hide-on-tablet option from the button and add this CSS instead:

@media(max-width: 1340px) and (min-width: 769px) {
    .site-logo {
        padding-left: 163px;
    }
}

It will keep the logo centred.

March 13, 2023 at 11:40 am #2566395

Thank you! That worked great.

If I wanted the button to show on desktop, tablet, AND mobile - is that possible? I know there's nota ton of room on mobile with the search icon on the right, but i'd be open to removing the search icon just on mobile if that's possible.

March 13, 2023 at 3:49 pm #2566576

You could try this CSS:

@media(max-width: 1340px) and (min-width: 769px) {
    .site-logo {
        padding-left: 163px;
    }
}
@media(max-width: 768px) {
    #mobile-header.has-branding .menu-toggle {
        margin-right: unset !important;
    }
}
@media(max-width: 420px) {
    .menu-bar-items .gb-button {
        font-size: 12px !important;
        max-width: 80px;
        line-height: 1.2em
    }
    .site-logo {
        width: 90px;
    }
}

And remove all the hide-on- classes

This archived topic is closed to new replies.

Start building better websites today.