Contempo And The Missing Hamburger...

When Blogger rolled out new templates in 2017, the navigation scheme for the new templates was a bit different. Those of us who happened to have the screen width set below a given width, discovered that the sidebar menu was not visible on the home page unless you selected a "hamburger" icon on the top-left corner of the page. And, 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.

Since my display is set to a width of 1280, I found that I had to set the Zoom level to 80% to force the sidebar to appear on post pages, otherwise it was inaccessible. I don't like editing the HTML as it can become a maintenance issue down the road if the default template is changed. A fix that involved editing the HTML has been around for a while, but, what I really wanted was a gadget that could be added to a page's layout that would restore the hamburger to post pages without having to edit the theme's HTML.

To start, I grabbed the HTML code for the hamburger icon by using my browser's inspect feature and the code I retrieved was as follows:

<button class="svg-icon-24-button hamburger-menu flat-icon-button ripple">
<div class="splash-wrapper">
<span class="splash" style="height: 48px; width: 48px; left: -4px; top: 4px;"></span>
</div>
<svg class="svg-icon-24">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>

The next step was to come up with a mechanism for adding the hamburger icon to post pages. After some poking around, I came up with the following 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 +'<button class="svg-icon-24-button hamburger-menu flat-icon-button ripple" style="position:absolute !important;top:0px;"><div class="splash-wrapper"><span class="splash" style="height: 48px; width: 48px; left: -4px; top: 4px;"></span></div><svg class="svg-icon-24"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></button>';
}
} //if
} //for
</script>

The code shown above, simply appends the hamburger code, with a minor modification, 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.

The highlighted area of the code shown above is an inline style that I added to force the hamburger icon to appear at the top of the page. To ensure that the hamburger icon does not conflict with the return link button that appears at the top of post pages, I came up with the following custom CSS and placed it in the advanced section of the customize theme menu using Theme > Customize > Advanced > Add CSS:

.return_link {
position:relative;
left:-50px
}

It's been almost a year since the launch of the new Blogger templates and I'm still settling in. Enjoy. By the way, the character in the image above is Mimi Pearlbaten from Re:Zero.