1

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.

firoze
  • 61
  • 1
  • 10

3 Answers3

2

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.

firoze
  • 61
  • 1
  • 10
1

By editing some css you can make this change.

  1. At first remove this css. enter image description here

  2. Remove media query on this class and make it global like the image enter image description here

  3. Remove this mark down class enter image description here

Hope it will work.

Syed Shah Riage
  • 41
  • 3
  • Hello Syed, thank you for your message. How do I edit these codes? When I open the Blogger HTML editor I cannot find these exact codes. Is there another way of editing them? I am using a Apple MacBook Pro with Safari web browser. I can see these codes in the Safari web inspector, but I do not know how to edit them. Please let me know how to edit them. Thanks. – firoze Sep 29 '20 at 19:09
  • @Sayed Shah Riage Could you please tell me how to go about editing those codes? – firoze Oct 01 '20 at 14:14
  • @firoze You can open your blogger admin panel. Then go to Theme>Customize>Edit HTML. – Syed Shah Riage Oct 01 '20 at 15:59
  • Yes I did go into the Blogger HTML editor. I could not find the exact same codes in your screenshots, but I found similar codes and removed them removed them as per your instructions. Removing those codes made the Hamburger menu permanently appear, but when made the website looks distorted - the entire Body is shifted to the left side, and the fonts are unnaturally enlarged. Can you please suggest what else to do? – firoze Oct 01 '20 at 17:08
  • These are the codes I deleted: .hamburger-menu-container{ display:none } AND .sidebar-container{ overflow:visible; z-index:32 } } AND html[dir=rtl] .sidebar-container.sidebar-invisible{ -webkit-transform:translateX($(sidebar.width)); -ms-transform:translateX($ (sidebar.width)); transform:translateX($(sidebar.width)) } } – firoze Oct 02 '20 at 10:56
0

Based on 1st response - if you cant get to the Width option from the Customization page - edit the html as follows:

FROM:

<Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px"  value="117px"/>

TO:

<Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px"  value="600px"/>
TonyC
  • 1
  • Where exactly would this code be put on Blogger? Could you be more specific than just `edit the HTML`, which might help make your answer better. – treckstar Jun 13 '22 at 23:40