- This topic has 3 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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!
Customer Support
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-tabletclass 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-tabletoption 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.
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.
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
- You must be logged in to reply to this topic.
