- This topic has 9 replies, 4 voices, and was last updated 4 weeks ago by
Fernando.
-
AuthorPosts
-
July 7, 2022 at 4:18 am #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?
July 7, 2022 at 5:20 am #2275945David
StaffCustomer SupportHi 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 MobileDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2022 at 12:59 am #2277659roy
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?
July 9, 2022 at 11:15 am #2278081Leo
StaffCustomer SupportThis 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/July 10, 2022 at 4:42 am #2278394roy
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, 🙂
July 10, 2022 at 5:44 pm #2278847Fernando 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.
July 14, 2022 at 11:23 pm #2283238roy
Is there anyway to get it on one line?
July 14, 2022 at 11:38 pm #2283244Fernando 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; } }
July 17, 2022 at 5:48 am #2285113roy
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!!
July 17, 2022 at 5:36 pm #2285539Fernando 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!
-
AuthorPosts
- You must be logged in to reply to this topic.