• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

How to increase the size of the Genesis Sample hamburger menu

Learn in this tutorial how to increase the size of the Genesis Sample hamburger menu on mobile devices using code.

As you know,Genesis Sample child theme displays by default the text “Menu” next to the burger icon on small screens:

Default responsive menu in Genesis Sample.

Thanks to the tutorial where I explained how to remove this text you can get a more minimalist look.

Responsive Genesis Sample menu without text.

But what if you also want to take advantage of the space freed to increase the size of the burger menu?

Bigger hamburger menu in Genesis Sample.

Well, here are the steps to get it in Genesis Sample (≥ 3.0):

Snippet to make the burger menu bigger in Genesis Sample

Add this code to the end of the file style.css:

To see this and another 847 code snippets of this website, login or subscribe here.

With this simple change you increase the Genesis Sample burger menu icon for small screens.

Conclusions

Now you know how to resize the Genesis Sample responsive menu with a simple snippet.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉

CSS Genesis Framework Menu

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?