Depending on your preferences, Contempo Template in blogger may need three code fixes to replace minor annoyances with a more professional operation of the website.
UNWANTED SIDEBAR ON DESKTOP
Number 1 … When the website was displayed on a wide screen on a desktop computer, the Sidebar pops out to the left and produced an ugly off-center display of the website. The Sidebar would eliminate the “hamburger menu” (three stacked, horizontal bars) and just didn’t look right.
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
Number 2 … In many cases a sticky header doesn’t look good and can interfere with content or ads. The sticky header keeps the “Hamburger menu” and the blog description visible at the top when scrolling down on a mobile device. If you don’t want this obstruction replace “position:fixed” with “position:relative” and the sticky header will be gone.
There is 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.
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 disabled. The 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.
STICKY HEADER FIX
Using Blogger’s HTML mode, replace the following CSS code:
UNWANTED BACK ARROW
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 going to a previous page or the Home Page. If the viewer arrives from another website to an internal page instead of the Home Page the internal web page displays the Back Arrow. Does that Back Arrow go to the previous website? No, it goes to the Home Page. The website designer might prefer to eliminate this ambiguity by keeping the space reserved for the “Hamburger Menu” and not have it change to the Back Arrow. The “Hamburger Menu” is consistent. The Back Arrow is inconsistent.
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.
Using Blogger’s HTML mode, replace the following HTML code: