# From main menu to mobile menu when using two rows

**URL:** <https://community.wpbeaverbuilder.com/t/from-main-menu-to-mobile-menu-when-using-two-rows/19040>\
**Category:** Beaver Themer\
**Tags:** mobile\
**Created:** [October 22, 2024, 2:54am UTC](https://community.wpbeaverbuilder.com/t/from-main-menu-to-mobile-menu-when-using-two-rows/19040 "2024-10-22T02:54:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![xuamox](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/x/e47c2d/32.png) [@xuamox](https://community.wpbeaverbuilder.com/u/xuamox)\
**Post date:** [October 22, 2024, 2:54am UTC](https://community.wpbeaverbuilder.com/t/from-main-menu-to-mobile-menu-when-using-two-rows/19040/1 "2024-10-22T02:54:19Z")

</div>

Hi, I am trying to build a header using Beaver Themer and want to make sure I am doing things correctly.

My header consists of two rows.

**Top Row - Three Columns**  
The top row will have three columns. Column 1 is for logo, column two is for main menu that will be hidden on large screens but will display a hamburger menu on mobile. Column three has my social media icons, and these will only display on large desktop.

**Second Row - One Column**  
The second row has one column and also contains the main menu, but it’s only displayed on large desktops and hidden on mobile.

**Mobile**  
On mobile, I hide the third column on the first row, and I hide the second row, and I want the main menu on the second column to display the hamburger icon. This is working!

**When I click Hamburger Icon**  
When I click the hamburger icon on mobile, I want it to display the main menu dropdown. This currently works, but my hamburger icon drops down to a new row. I am not sure why.

So my question is how do I get the mobile menu to open, but keep the hamburger icon in it’s column and simply show the menu below?

Thanks