Home › Forums › Support › landing page –> menu should hide by default, but appear when scrolling down
- This topic has 44 replies, 3 voices, and was last updated 4 years, 2 months ago by Leo.
-
AuthorPosts
-
February 2, 2016 at 12:51 am #169825Sven
Hi Tom,
haven’t found a solution in the support forum to that challenge:
I created a landing page (section-based). Have a look: http://www.fudiggl.de
When the start-page loads, the menu appears by default (on the very top of it). Is there a way to hide that menu until a user scrolls down? Then it should appear permanently and behave as on any other page/post…
Or otherwise: is it possible to deactivate the menu on a per-page base and to hook it somehow to a certain section?
I appreciate your answer!
Sven
P.S.: Would be cool, when the menu slides out/disappears again (same behavior as customized), after one clicked “back-to-top-button” (great little improvement!) and the page scrolls back to the top…
February 4, 2016 at 3:33 pm #170475TomLead DeveloperLead DeveloperHi Sven,
That website doesn’t seem to be loading for me.
Can you check and let me know?
Thanks!
February 4, 2016 at 10:26 pm #170545SvenHi Tom,
should be working… can you pls try again?
SvenFebruary 4, 2016 at 10:39 pm #170547TomLead DeveloperLead DeveloperHmm let’s try this..
Set the “Sticky effect” to “Fade” or “Slide”.
Then add this CSS:
.main-navigation { display: none; } .main-navigation.navigation-clone { display: block; }
Nice site BTW!
Let me know π
February 5, 2016 at 1:06 am #170582SvenNearly… the menu is hiding and by scrolling down it appears (with the set effect)… that’s cool!
But now there appears a white block where the menu regularly was. Also a dot “.” shows up on the left side!?
http://www.fudiggl.de/wp-content/uploads/hide_menu_error1.jpg
Any suggestions?
February 5, 2016 at 2:46 am #170597SvenHi Tom,
I actually discovered, that this way the menu not only disappears on my start page but on ANY (!) page/post… I had to adjust that, so it takes effect only where I want to have it…
page-id-nnn .main-navigation {
display: none;
}.page-id-nnn .main-navigation.navigation-clone {
display: block;
}(where nnn ist the page-/post-id)
Now I only need help with that dot and that blank area!
Hope, you have an idea!?
February 5, 2016 at 10:24 pm #170804TomLead DeveloperLead DeveloperThe dot seems to be coming from this custom CSS:
.my-transparent-section:before { position: absolute; content: "."; background-color: rgba(255, 255, 255, 0); top: 0; left: 0; bottom: 0; right: 0; z-index: 1; }
Where’s the main image coming from? Is it uploaded as the section background?
February 5, 2016 at 10:41 pm #170814SvenHi Tom,
no, it’s manually set as background-image:body.page-id-nnn {
background-image:url(‘http://www.fudiggl.de/wp-content/uploads/site_background_2016.jpg’);
background-repeat:no-repeat;
background-attachment:fixed;
background-clip:border-box;
background-position:0px 70px;
background-size: 1963px auto;
}Concerning “the mysterious dot” π
I used your code snippet for transparent sections as mentioned in the support forum. Just out of curiosity: why did you use it in your code? Is there a deeper meaning?I have deleted it in the code snippet, seems to me, there’s no negative effect… so I’ll leave it blank.
Now there’s only one further thing: actually the menu is hiding and instead of the menu there’s a blank white space on top of my start page. How to expand the background image so there’s no white area at all?
February 5, 2016 at 10:52 pm #170817SvenI’ve seen it myself…!!! Somewhere in the positioning process I set “background-position:0px 70px;”
It’s done!
Thank you for your support!
Best wishes,
SvenFebruary 5, 2016 at 10:53 pm #170818TomLead DeveloperLead DeveloperAwesome, glad you found it π
January 23, 2020 at 3:02 pm #1142006SvenHi Tom,
after months I recently encountered an error at https://fudiggl.de :
on the start page I hide the main menu. It’s showed when scrolling down. Therefore I used your recommended css as written in this post.Now recently the menu disappeared at all – and doesn’t show when one scrolls..
Also on my mobile phone (chrome browser) the word “menu” and its common icon (three horizontal lines) are shown, but the don’t work: one can tap on the word or the lines and that changes the color of the menu background, but no menu appears!
But: it works well within the customizer…
I don’t know anymore, where to look and what to do… so I appreciate your help!
Best regards, Sven
January 23, 2020 at 3:06 pm #1142011LeoStaffCustomer SupportCan you try this solution?
https://docs.generatepress.com/article/show-sticky-navigation-only/Let me know π
January 23, 2020 at 3:09 pm #1142016SvenNow any menu is hidden… no menu at all!
January 23, 2020 at 4:18 pm #1142056LeoStaffCustomer SupportDid you remove the CSS Tom provided previously?
Let me know π
January 23, 2020 at 11:51 pm #1142257SvenYes I removed Tom’s code and added the one, you mentioned: https://docs.generatepress.com/article/show-sticky-navigation-only/
then the menu disappeared (desktop and mobile)
now I’ve reset: deleted sticky and re-added Tom’s css again… error persists!
-
AuthorPosts
- You must be logged in to reply to this topic.