SMF Posted December 28, 2021 Share Posted December 28, 2021 Site URL: https://www.milanopizza.sg/ Hello, Need help! Been trying to figure out why the main navigation or hamburger icon does not appear on the Home Page when using mobile. Users cant navigate our site and cant access the other pages. This problem only occurs on the Home Page. Succeeding pages would have the hamburger icon. And when we click the hamburger icon from the other pages, the navigation menu would appear (please see screenshots below). We're on version 7.1 (https://www.milanopizza.sg/)... Appreciate if you could help us. Thank you! ======================= MOBILE VIEW (does not have the navigation menu or hamburger menu): DESKTOP VIEW: THE OTHER PAGES have the hamburger menu when using mobile: The Navigation Menu appears when we click the hamburger menu from the other pages: Link to comment
creedon Posted December 28, 2021 Share Posted December 28, 2021 The Custom CSS has been set up to hide the header on the homepage. #collection-60fe53d515592d3e1078688f header { display: none; } Unfortunately it appears some other manipulations of elements at the top of the page are going on in addition. This doesn't appear to be an easy fix without knowing the intent of the original design. Why was the header hidden in the first place? Nothing wrong with hiding mind you but again without knowing why it was done. It is hard to fix. SMF 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
SMF Posted December 29, 2021 Author Share Posted December 29, 2021 8 hours ago, creedon said: The Custom CSS has been set up to hide the header on the homepage. #collection-60fe53d515592d3e1078688f header { display: none; } Unfortunately it appears some other manipulations of elements at the top of the page are going on in addition. This doesn't appear to be an easy fix without knowing the intent of the original design. Why was the header hidden in the first place? Nothing wrong with hiding mind you but again without knowing why it was done. It is hard to fix. Thank you for answering. I'm not very good with coding and rarely use Custom CSS. It's not supposed to be hidden though. Link to comment
creedon Posted December 29, 2021 Share Posted December 29, 2021 (edited) Quote It's not supposed to be hidden though. I'm going to take a stab at this. It appears that the header that is provided by SS wasn't desirable on desktop on the homepage so a section was created at the top to replace the header. The real header was hidden causing unintended consequences. If I've surmised correctly then here is what I suggest. Remove (make a copy somewhere) or comment out the following from Design > Custom CSS. #collection-60fe53d515592d3e1078688f header { display: none } Please see the following. This is for the homepage. The first section will be not be used except for some top-padding that is needed for things to work. Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> /* begin desktop header replace with second section Version : 0.1d0 SS Version : 7.1 Dependancies : page section first blank hide By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ #header { display : none; } @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { #header { display : unset; } .page-section:nth-child( 2 ) { display : none; } } /* end desktop header replace with second section */ </style> This is for v7.1 and specific to the poster's need. Let us know how it goes. Edited January 11, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment