Customize mobile menu
-
Is there a fairly simple way to customize the mobile menu for the Go theme?
Two requests:
1) Replace the right-aligned ellipsis (…) icon with text saying MENU, with text being customizable for font-family and font-size. Have it retain the current function that brings up the mobile menu overlay.
2) Center the MENU link in the middle of the header, beneath a logo, and be able to adjust the margins or padding to adjust the space between logo and MENU, and the space beneath the MENU (in order to push the colored background of the header down for extra space).
Related note: I currently have the left-aligned search icon hidden via an opacity CSS.
Thanks
-
Hey @mikegerhardt,
Thanks for reaching out!
The Go theme doesn’t provide such functionality by default, however, I am willing to help you with some JS and CSS code but before that, please give me the URL of your site. Thanks in advance!
Kind Regards,
Milos | GoDaddyHi @gdmilos – thanks much for that offer. The website is https://www.clintoncommunityhall.org
Really appreciated finding and using the Go theme so far.
Cheers,
MikeHi there, I have made a site using the Go theme and need a way to increase the font size of the menu for mobile. It’s kind of odd that there is no font information in the site customization section. Do you have plans to add that?
Many thanks for the help,
DianeHi @mikegerhardt,
Thanks for your reply and thanks for the provided URL.
In order to achieve the desired functionality, please follow these steps:
1. Install and activate this plugin
2. Add the following code here:
<script> jQuery(document).ready(function(){ jQuery("#nav-toggle .nav-toggle-icon:first-of-type").replaceWith('<p class="custom-menu-text">Menu</p>'); }); </script>3. The following CSS code should be added to the theme’s customizer (Appearance > Customize > Additional CSS):
@media only screen and (max-width: 959px) { .nav-toggle{ outline:none !important; } .nav-toggle-icon.nav-toggle-icon--close svg{ color:transparent; } .header__title-nav{ margin-top:-45px; } .header__nav-toggle{ text-align:center; } #header__navigation{ margin-top: 160px; } .header__inner{ display:block; } } @media screen and (min-width: 768px) and (max-width:959px){ #header__navigation{ margin-top: 220px; } } .custom-menu-text{ font-family:Arial; }Feel free to adjust values from the CSS code per your needs.
Let me know if this works for you! 🙂
Have a nice day!
Milos | GoDaddy@gdmilos – thanks so much. I’ll play around with this a bit more, but looking great so far. Cheers and thanks for your time!
Dear @mikegerhardt,
You’re most welcome! I am glad to hear that the provided solution worked for you!
Have a nice one, Mike 🙂
The topic ‘Customize mobile menu’ is closed to new replies.
