Forcing 2 Blocks Into The Same Row On Mobile Help

Hi all,

I was wondering if anyone knew how to make 2 blocks appear on the same line when my site is displaying on mobile.

I am using the Simtech Hamburger menu addon as a block and the normal search box as another block in the same grid.

The Hamburger menu is set to display on mobile only but sits above the search box on mobile.

Is there any way to force the menu to sit on the same row as the search box?

Please see screenshots for reference and as always any help would be appreciated!

Thanks

Existing Layout.png

Desired Layout.png

Please PM me store access key. We will try to help you

I have sent this to you as a PM. Thank you for offering to help!

This is the current layout. The main menu is hidden on mobile and the hamburger menu is hidden on desktop and tablet.

With the Hamburger menu and search sharing a grid i was hoping they would display side by side but that does not seem to be the case!

Layout.JPG

This is the current layout. The main menu is hidden on mobile and the hamburger menu is hidden on desktop and tablet.

With the Hamburger menu and search sharing a grid i was hoping they would display side by side but that does not seem to be the case!

Let me know your site URL. I will try to fix this in CSS.

I see this

http://prntscr.com/nkb9u0

Do you want to place My account and My cart blocks on one line?

Thank you for the replies.

Ecom Labs - If you try and preview the page on a desktop, even in mobile view it does not display the correct blocks which is why it looks like that.

So the hamburger menu and the search block share a grid. The hamburger menu is set to display on mobile only.

I have managed to get the search bar onto the same line as the hamburger menu by assigning each block with display: inline-block; in css. I then simply set the search block to a width of 85% to ensure space on the line for the hamburger menu.

I have attached a screenshot of the results. I am pleased with this as when i asked CS-Cart direct i was told it would require paid modifications to achieve.

Thanks to everyone for the replies!

Screenshot_20190507-102333.png

Hi,

Perhaps you can also achieve this by changing your grid setting and adding a new grid parallel to search and adding humburger block into that grid. This way instead of looking on top of search your humburger layout looks in parallel and same will replicate on frontend too. https://prnt.sc/nma637

Hi ankita,

Thanks for the suggestion. I did try this but the search block seems to fill the row anyway.

So the hamburger menu was forced above the search and the cart content block was forced below.

Hi,

Please make sure that total sum of your grid division must be 16. See in my screenshot it is 3+3+10. Then in the grid of 10 if have to divide my blocks as per my choice like in 2,3,1 and so no but the total must be of 10. If you maintain this situation it will be in a row as you wanted.