• Resolved mikegerhardt

    (@mikegerhardt)


    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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 | GoDaddy

    Thread Starter mikegerhardt

    (@mikegerhardt)

    Hi @gdmilos – thanks much for that offer. The website is https://www.clintoncommunityhall.org

    Really appreciated finding and using the Go theme so far.

    Cheers,
    Mike

    Hi 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,
    Diane

    Hi @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

    Dear @diane-gilson,

    Kindly create a new thread and we will help! 🙂

    Have a nice day, Diane.

    Thread Starter mikegerhardt

    (@mikegerhardt)

    @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 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Customize mobile menu’ is closed to new replies.