Depending on your preferences, Contempo Template in blogger may need three code fixes to replace three minor annoyances with a more consistent and intuitive function of the website. The recommended improvements in human interface for the Contempo Template include the following three code fixes …
1) eliminate an unwanted spontaneous Sidebar appearance when the website window is opened wide on a desktop or laptop,
2) eliminate an ambiguous Back Button, and replace it with a consistent “Hamburger Menu” on every page, and
3) eliminate an unnecessary sticky bar (with a hamburger menu, website description and search function) that appears fixed or stationary atop mobile devices when a user scrolls down a web page.
UNWANTED SIDEBAR ON DESKTOP EXPLANATION
Number 1 … By default, when the website is displayed on a wide screen on a desktop computer, the Sidebar pops out to the left and produces an off-center display of the website. The appearance of the Sidebar eliminates the “hamburger menu” (three stacked, horizontal bars), and just doesn’t have a good appearance with the off-center website.
The goal is to keep the “Hamburger Menu” from disappearing on wide screens while keeping the sidebar from popping out without a request by the user. This configuration keeps mobile and desktop appearance consistent and avoids a surprise showing of the Sidebar.
UNWANTED SIDEBAR FIX
In Blogger editor, go to Theme > Customize > Advanced > Widths and set the Content Margin value to 600.(default value is 117). With this configuration, the Sidebar will not appear unless the “Hamburger menu” is clicked (and the “Hamburger menu” will not disappear).
UNWANTED STICKY HEADER WHEN SCROLLING DOWN – EXPLANATION
Number 2 … By default, when the user scrolls down on a mobile device, a light gray sticky header pops up at the top of the mobile device In many cases a sticky header doesn’t look good, and can interfere with header content or header ads. The sticky header keeps the “Hamburger menu” and the blog description, and the search icon visible at the top when scrolling down on a mobile device. If you don’t want this obstruction, you look for CSS control labeled “.centered-top-container.sticky{” and then replace “position:fixed” with “position:relative” to remove a fixed sticky header from the top of the mobile device.
There may be some minor artifact or “flashing” of the sticky header when you scroll all the way to the bottom of the page. The sticky header might flash an appearance for less than a second or it might appear stationary at the bottom of the web page, but this is likely to be preferable to a fixed or “sticky” hamburger menu at the top of the mobile device — taking up valuable screen real estate.
Don’t think you can insert “display:none” to make the sticky header disappear forever. Using display:none causes the “Hamburger menu” and the Search function to become intermittently or unpredicatably disabled. The “Hamburger menu” and its functions become disabled when the user scrolls down, or when the phone is re-opened after the phone screen is awakened from auto-lock or manual lock. The user is required to refresh the page to get the functioning hamburger menu to return for use.
STICKY HEADER FIX
Using Blogger’s HTML mode, replace the following CSS code:
BEFORE
.centered-top-container.sticky{
left:0;
position:fixed;
right:0;
top:0;
width:auto;
z-index:8;
AFTER
.centered-top-container.sticky{
left:0;
position:relative;
right:0;
top:0;
width:auto;
z-index:8;
SOURCE: How to disable sticky header from blogger when scrolling down? – Blogger Community
UNWANTED BACK ARROW EXPLANATION
By default, when a viewer goes to a specific web page from the Front Page or Home Page, the “Hamburger Menu” changes to a Back Arrow. Unfortunately, a Back Arrow is ambiguous because the viewer doesn’t know if the Back Arrow is sending the user to a previously viewed page (maybe even a previous website) or the Home Page. If the viewer arrives from another website to an internal page (instead of the Home Page, which always shows the hamburger menu), the internal web page displays the Back Arrow. Does that Back Arrow take the user to the previous website or previous page within your website using the Contempo template? No, the Back Arrow takes the user to the Home Page of your website. The Back Arrow is redundant because the website’s header graphic is displayed on every website post or page, and consistently takes the user to the front page. The website designer might prefer to eliminate this ambiguity and redundancy by keeping the space reserved for the “Hamburger Menu” and configure the website space to never change to the Back Arrow. The “Hamburger Menu” consistently takes the user to the Menu Sidebar, and eliminates an extra step required to go to the front page first if the user wants to see the Sidebar Menu. In the default setup, the user has to “go back” to the front page in order to find the hamburger menu; and, as mentioned, the Back Arrow is unclear where it is taking the user.
FIX BACK ARROW WITH HAMBURGER MENU
A one-time exchange of a single section of HTML code must be replaced with a simpler section of code in order to replace the BACK ARROW with the HAMBURGER MENU for all pages on the website.
Enter Blogger’s HTML mode …
REMOVAL FOR REPLACEMENT
<b:if cond='data:view.isSingleItem'> <a class='return_link' expr:href='data:blog.homepageUrl'> <b:include data='{ button: true, iconClass: "back-button rtl-reversible-icon flat-icon-button ripple" }' name='backArrowIcon'/> </a> <b:else/> <b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/> </b:if >Search for part or all of the code above, but then select all of it …
REPLACEMENT CODE
<b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/>Be careful you don’t select the wrong code, too much code, or too little code.
Be sure you have selected, copied and pasted the replacement code accurately, and then click the SAVE icon to save your changes.
The Blogger SoHo them code is different that than the Contempo theme code …
REMOVAL FOR REPLACEMENT
<b:if cond='data:view.isPost'><div class='back-button-container'><a expr:href='data:blog.homepageUrl'><b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/></a></div><b:else/><div class='hamburger-menu-container’><b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/></div></b:if>REPLACEMENT CODE
<div class='hamburger-menu-container'><b:include data='{ iconClass: "touch-icon hamburger-menu"}'
name='menuIcon'/></div>