The Genesis themes are not suitable for non-coding experts, although most of them preferred to use it. Because Genesis themes are pretty incredible with their load time and much more. Most of them purchase the Genesis framework with a child theme and start designing their website manually by adding necessary PHP, HTML, and CSS codes.

Here’s the complete guide to move the mobile menu to the header part in Genesis themes. I have tried to move the menu to the Header using the CSS code, and it worked for me successfully. The CSS code is as follows.


/* Menu to top code */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

.responsive-menu-icon {
position: absolute;
left: 20px;
top: 20px;

.title-area {
float: none;
padding: 0;
margin: 0 auto;

Note: Copy the entire code as copying the half code gives you unexpected output.

If you know how to add the CSS code, you can copy and paste the code directly to move the menu to the header part. If you don’t know how to add the CSS codes, follow the below guide

How to move Mobile Menu to the Header?

  • At first, copy the above-mentioned code and open your website
  • Login to your website and open the homepage
  • Now, on the homepage, click on customize and head to Additional CSS option
  • Paste the code and click on Publish
Genesis Mobile Menu to Top Code

Hola! You have successfully moved the Mobile Menu in Genesis child theme to the header part. I have tried this using the Eleven 40 Pro theme, and it worked like a charm for me. If you have encountered any problem, let us know via the comment section below.

Also, Check out: How to change Jio Fiber WiFi SSID and Password.



Please enter your comment!
Please enter your name here