- This topic has 26 replies, 3 voices, and was last updated 3 years, 8 months ago by
Tom.
-
AuthorPosts
-
March 9, 2018 at 6:51 am #515623
CG Klein
Hello,
I am using the flowing css to make the top bar sticky and want the primary menu to go underneath when it becomes sticky. Please help!
.top-bar {
position: sticky;
z-index: 999;
top: 0;
left: 0;
right: 0;
}Thank you,
cgkGeneratePress 2.0.2March 9, 2018 at 10:30 am #515814Tom
Lead DeveloperLead DeveloperHi there,
Try this:
.navigation-stick { top: 45px !important; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 9, 2018 at 10:38 am #515821CG Klein
Hello,
Worked great!
Thank you much!
cgkMarch 9, 2018 at 10:44 am #515827CG Klein
Hello,
I spoke to soon, needs different value to work on mobile and dos not work with hide when scrolling down.
Any ideas?Thanks again,
cgkMarch 9, 2018 at 11:06 am #515843CG Klein
Hi,
Maybe something like this,
}
.sticky-mobile-header {
top: 90px !important;
}Thanks,
cgkMarch 9, 2018 at 9:12 pm #516099Tom
Lead DeveloperLead DeveloperYou’ll need to write a media query to increase or decrease the top value on mobile:
@media (max-width: 768px) { .navigation-stick { top: 90px !important; } }
What about it doesn’t work when the nav only appears when scrolling up?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 10, 2018 at 1:43 am #516185CG Klein
OK,
That css worked for the mobile with 80px.
The hide when scrolling down dose not hide but shows menu when scrolling down on both desktop and mobile.
Thank you,
cgkMarch 10, 2018 at 2:45 am #516203CG Klein
Also the top bar diapers when using the side-out menu and not at the top of the screen.
March 10, 2018 at 3:17 am #516228CG Klein
This is what I have so far.
.top-bar {
position: sticky;
z-index: 999;
top: 0;
left: 0;
right: 0;
}
.navigation-stick {
top: 45px !important;
}
@media (max-width: 768px) {
.navigation-stick {
top: 55px !important;
}
}
@media (max-width: 420px) {
.navigation-stick {
top: 80px !important;
}
}
@media (max-width: 320px) {
.navigation-stick {
top: 115px !important;
}
}March 10, 2018 at 10:05 am #516527Tom
Lead DeveloperLead DeveloperInstead of
position: sticky;
, tryposition: fixed;
As for the hide when scrolling down, I’d need to see it to come up with the fix.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 10, 2018 at 10:17 am #516542CG Klein
When I use “fixed” it places menu under top bar unless I scroll down.
I can make you a login if you would please take a look.March 10, 2018 at 10:18 am #516543Tom
Lead DeveloperLead DeveloperI’m getting this message while trying to set the password: Sorry, your request cannot be accepted.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 10, 2018 at 10:19 am #516544CG Klein
ip block i will disable for CA
March 10, 2018 at 10:26 am #516555Tom
Lead DeveloperLead DeveloperGot it.
Add this:
body { padding-top: 45px; }
That will allow you to use
position: fixed;
instead ofposition: sticky;
Then instead of
top: 45px !important;
usemargin-top: 45px !important;
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 10, 2018 at 10:39 am #516562CG Klein
That dose allow me to use fixed so the top bar dose not disappear on mobile when using side-out menu but the spacing is off on mobile. The hide when scrolling down dose not work on desktop or mobile.
-
AuthorPosts
- You must be logged in to reply to this topic.