The Lingering Mystery Of The Missing Hamburger In Emporio...

This is very off-topic. But, I'll just preface this by saying that I don't have a magic solution for some hamburger issues on the Emporio template. I've been experimenting with the template in an effort to get the hamburger to appear on the item view and behave in a similar fashion to the home page, but, I'm running into some difficulties. I've used a technique similar to the following on Contempo and Soho, so, I thought I'd give it a try and it failed spectacularly. This is the Emporio-flavored code that I'm using to make the hamburger show on the item view, but, fair warning, it doesn't actually do anything but blank out the page:

<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 +'<div class="hamburger-section"><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></div>';
var asides=d.getElementsByTagName('aside');
//Set the sidebar flag to invisible
if (asides.length>0) {
asides[0].className="sidebar-container container sidebar-invisible";
}
break;
}
} //if
} //for
</script>

I placed the code above in an HTML/JavaScript gadget and placed that gadget in the footer area in the layout. There's no close button, but, you can just click anywhere on the screen to return to the page. And, there's a bit of CSS to go with the script. Add the following CSS to: Theme > Customize > Advanced > Add CSS:

.item-view .centered-top .hamburger-section {
display:block !important;
}

When inspecting the page, I'm not seeing the sidebar close icon, so, it looks like that will need to be replicated using a script. I'm not sure at this point, how much scripting will be needed or if the bulk of the heavy lifting can be done with CSS. The item view has its sidebar content always visible either on the right side of the page or at the bottom of the page, so, in theory, making the sidebar content appear permanently at the top of the page shouldn't be that hard? Right? 😱 There are rules for when and how the hamburger appears on the home page and a different set of rules for how things work on the item view. At this point, I have no idea what those rules are or how to break them.

On a side note, while I was experimenting, I got the sidebar to stay hidden on the home page. The CSS for that follows. If you plan on using this CSS add it via Theme > Customize > Advanced > Add CSS:

@media (min-width: 744px) {
.feed-view .centered-top .hamburger-section {
-webkit-box-align: center;
margin-right: 24px;
align-items: center;
display: -webkit-box;
display: flex;
height: 48px;
}}
@media screen and (min-width: 679px) {
.feed-view .sidebar-container.sidebar-invisible {
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition-timing-function: cubic-bezier(.4, 0, .6, 1);
transition-timing-function: cubic-bezier(.4, 0, .6, 1);
}
.feed-view .sidebar-container .navigation {
display: block;
padding: 24px;
}
.feed-view .sidebar-container {
margin-left: 0;
max-width: none;
width: 100%;
}}
@media screen and (min-width: 790px) {
.feed-view .sidebar-container {
bottom: 0;
right: auto;
position: fixed;
left: 0;
top: 0;
}}

In theory, the code above could be used as a starting point in a more robust code set to display more columns of snippets on the home page. Currently, I think the maximum is 3 or 4 columns (?) on Emporio. Really wide screens could benefit from having more columns visible. Again, I'm not sure what the underlying mechanism is, but, I suspect some kind of grid layout. Some more research would be required to pick apart the inner workings of Emporio.

The item view's CSS will have to be managed in some way that allows the sidebar to be manhandled in some meaningful way. A way forward might be to use a script to change the page's "item-view" class to "feed-view" or remove the "item-view" class from the page altogether and observe how the page responds. Although, now that I think about it, that sort of fundamental shifting of the inner workings of the theme might be better in the actual theme code than a script. 😵

I don't usually like leaving people hanging without a solution, but, I don't plan on solving this soon. I've got anime that needs watching and there are only so many hours in the day. It took months to wrap my head around Contempo and later Essential and to figure out their eccentricities. I expect that an investigation into the inner workings of Emporio will require the same level of commitment. Sorry. This is all I have for today. ☹️