- This topic has 11 replies, 2 voices, and was last updated 1 year, 1 month ago by
Leo.
-
AuthorPosts
-
March 5, 2020 at 8:38 am #1186099
Scott
Hello,
I checked the forums a while back and was able to address my issue at first using the following:—
.main-navigation,
.logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}
—That worked great until I turned my attention to the mobile version of my site and enabled the mobile header. When I did that 2 menus started showing up. If I remove the code above, then only the appropriate menu appears.
My issue is, I don’t want any menus to appear if the user is not logged in but I only want the correct menu to appear once they have.
Does anyone know the solution?
Thank you,
ScottMarch 5, 2020 at 9:07 am #1186124Leo
StaffCustomer SupportHi there,
Can you try this CSS as well?
#mobile-header .menu-toggle, .logged-in #mobile-header .menu-toggle { display: none; } .logged-in #mobile-header .menu-toggle { display: block; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 9:29 am #1186149Scott
So those two lines alone didn’t work and when I put them with these 2, hides when not logged in but shows double menus when logged in…
.main-navigation,
.logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}March 5, 2020 at 9:53 am #1186171Leo
StaffCustomer SupportAre you able to send me a temporary login so I can test?
You can send it through Account Issues here:
https://generatepress.com/contact/Be sure to keep both CSS there, caching plugins off (if any) and include the forum topic URL.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 5, 2020 at 10:34 am #1186205Scott
Submitted
March 5, 2020 at 5:13 pm #1186501Leo
StaffCustomer SupportSorry when I used the token to login, I don’t see the double menu?
Am I missing something here?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 6, 2020 at 8:52 am #1187203Scott
I had removed the CSS code so my menus would at least show on my site.
If you add:
.main-navigation,
.logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}The menu isn’t shown if the user isn’t logged in but, once they do log in, there’s both the regular menu and the mobile menu displayed (on desktop). Phone and tablet show correctly.
If I put in this code instead:
#mobile-header .menu-toggle,
.logged-in #mobile-header .menu-toggle {
display: none;
}
.logged-in #mobile-header .menu-toggle {
display: block;
}It works perfectly on mobile but doesn’t hide when logged out on desktop.
If I do both, I get the double-menu when logged in on desktop again.
What I’m looking to do is have no menus displayed when a user is not logged in (regardless of device) and have the appropriate menu display when they are logged in (depending on the device they’re logged in on).
I am removing the code again so as not to have the double menu issue. Feel free to add it and test yourself. You can always create a free account on the site to see what I see.
Thank you
March 6, 2020 at 6:01 pm #1187507Leo
StaffCustomer SupportTry this for your full CSS:
@media (min-width: 769px) { .main-navigation, .logged-in .main-navigation{ display: none; } .logged-in .main-navigation { display: block; } } @media (max-width: 768px) { #mobile-header .menu-toggle, .logged-in #mobile-header .menu-toggle { display: none; } .logged-in #mobile-header .menu-toggle { display: block; } }
Also noticed that you are missing couple
;
in your Additional CSS so make sure to get that fixed.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 7, 2020 at 12:54 pm #1188142Scott
That didn’t seem to work for me but I did some tweaking and this appears to work:
@media (max-width: 768px) {
#mobile-header .menu-toggle, .logged-in #mobile-header .menu-toggle {
display: none;
}
.logged-in #mobile-header .menu-toggle {
display: block;
}
}
@media (min-width: 769px) {
#mobile-header .menu-toggle, .logged-in #mobile-header {
display: none;
}
.main-navigation, .logged-in .main-navigation{
display: none;
}
.logged-in .main-navigation {
display: block;
}
}For some reason, the mobile kept showing up on desktop and it was killing me.
Do you see anything wrong or missing from the code above?
Thank you,
ScottMarch 7, 2020 at 2:20 pm #1188196Leo
StaffCustomer SupportThat looks good to me!
Glad you got it working π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 7, 2020 at 3:21 pm #1188230Scott
Thanks!
March 7, 2020 at 6:30 pm #1188278Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.