Search code examples
htmlcssbloggersidebarhamburger-menu

Blogger SOHO theme: How to always show Hamburger menu on Desktop view instead of open Sidebar?


My blog is https://www.firozemistry.com based on the Blogger SOHO theme (with custom domain).

On smaller screens like Mobile or iPad, the Hamburger menu appears on top left in the Header. On large Desktop/Laptop screens the Hamburger menu disappears and, instead, the open Sidebar appears on the left side of the screen (instead of the Hamburger menu).

I would like the Hamburger menu to always show on large Desktop/Laptop screens. I do not want the sidebar to show, and instead would like the sidebar items to show only when the Hamburger menu is clicked on.

I would be grateful if someone would show me how to achieve this, either via CSS, or by modifying the HTML. Thank you.


Solution

  • I have found the answer, it is quite simple. In Blogger editor, go to Theme > Customise > Advanced > Widths and set the Content Margin value to 600.(default value is 117). Now even on the largest screens the Sidebar will not appear unless the Hamburger icon is clicked on.