Soho And The Missing Hamburger...

A while ago, I devised a solution for a Missing Hamburger In The Contempo Template. Recently, someone stopped by looking for a Soho-flavored solution. For those of you who are unaware, here's a bit of background on the problem...

When Blogger rolled out new templates in 2017, the navigation scheme for the new templates was a bit different. I discovered that if your screen width was below a certain width, the sidebar menu was not visible on the home page. For affected users, a "hamburger" icon on the page allowed access to the sidebar menu. However, if you navigated to a post, the hamburger icon disappeared entirely, so, those of us with screen widths below a given width, could not access the sidebar menu at all from post pages.

After some poking around I came up with the following Soho-flavored solution. Simply copy and paste the following code into a new HTML/JavaScript gadget:

<script type="text/javascript">
var d=document;
var divs;
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=='centered-top'){
var existingbutton = new String(divs[i].innerHTML);
if (existingbutton.indexOf('hamburger-menu') == -1){
divs[i].innerHTML = existingbutton + '<svg class="svg-icon-24 touch-icon hamburger-menu"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>';
}
} //if
} //for
</script>

The code shown above, simply appends the hamburger code into the placeholder reserved for the page header which in this example is called centered-top. The code doesn't really care whether it's being used on a post page or the home page, but, to prevent the hamburger code from being inserted on pages where it already exists, I simply check for the existence of the term "hamburger-menu" in the existing content in the centered-top placeholder, before appending the hamburger code. A tiny bit of CSS is required to disable the extra hamburger on wide screens:

@media screen and (min-width:1440px){
.hamburger-menu {
display:none;
}

The main differences between this Soho version and the earlier Contempo version is that the Soho version has slightly different code for its hamburger and some additional CSS is required to disable the extra hamburger for wide screens. As it happens, Soho, unlike Contempo, doesn't need any additional CSS to position its hamburger. The CSS shown above should be added using Theme > Customize > Advanced > Add CSS. Enjoy. By the way, the character in the image above is still Mimi Pearlbaten from Re:Zero, but, flipped horizontally to differentiate it from the character image used in the earlier post on this subject.