Navigation Placeholder

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

I've been tinkering with Emporio 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. This is the code that I'm using to get the hamburger to 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>
And a bit of CSS to go with the script:
.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, 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 of 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:
@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;
}}
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 need watching and there are only so many hours in the day. It took months to wrap my head around Contempo and to figure out its eccentricities. I expect that this investigation into the inner workings of Emporio will require the same level of commitment. Sorry. This is all I have for today.

Comments