- This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by Leo.
-
AuthorPosts
-
May 3, 2018 at 9:30 am #566610Tina
Hi,
I was using the old method to make my main menu and header logo stay at the top of the screen when a user scrolled won the page. This is the old code I used:
@media screen and (min-width: 800px) { .custom-fixed-header { position: fixed; top: 0; width: 100%; z-index: 2000; } } @media screen and (min-width: 800px) { .custom-fixed-header + * { padding-top: 120px; } }
This stopped working recently (not sure exactly when) and reading over the forum, I noticed there was a new method called a sticky menu.
I’ve followed the documentation here: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
The “sticky” menu doesn’t work for me. I’ve tried three browsers and they all look the same.
I am having lots of issues with the navigation logo remaining extremely tiny and the sticky part not working at all. When I scroll down the top of the site or menu doesn’t move with the page. I think with the logo that maybe the CSS doesn’t work so the size isn’t changed? I’m using simple CSS but the code I copied and pasted to it doesn’t appear to be picked up.
(Originally, I thought the sticky part was slow to work – but when I went back over all the steps, I discovered that the transition was still on. So I turned it off and it returned to normal – well what is showing at the moment.)
Is there any other way of achieving the original effect where the header, main menu and top menu stay in place?
Should I try another CSS option or create a child theme? The simple CSS doesn’t have many lines used up, I’m just not sure why it doesn’t work.
Is there an alternative to have the original effect with the old code work again?
Cheers,
-TinaMay 3, 2018 at 10:34 am #566669TinaSo. I copied the code to Additional CSS (from Simple CSS) and it appears to be working there. (Going to have to re-crop the logo so it looks better).
However, the header and top menu’s still don’t move down with the page. I thought that’s what the sticky menu was for? Is there something else I need to do for that effect?
Cheers,
-TinaMay 3, 2018 at 2:01 pm #566798LeoStaffCustomer SupportHi there,
Are you wanting both primary and secondary navigation to be sticky?
If so you would have to stick with the old method.
Let me know.
May 3, 2018 at 2:38 pm #566825TinaYes, I would prefer both to be sticky. I’ll reverse what I’ve done and then try the code in Additional CSS (Simple appears to have stopped working for me.)
Cheers! Will let you know the results.
-Tina
May 3, 2018 at 3:47 pm #566858TinaYes, it works again if I move the original code out of Simple CSS to Additional CSS.
Thanks for your help, Leo. I’ve another issue that its raised, but I’ll post about this separately.
-Tina
May 3, 2018 at 7:40 pm #566919LeoStaffCustomer SupportNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.