- This topic has 19 replies, 3 voices, and was last updated 7 years, 4 months ago by
.
-
Posts
-
Hi Steig
I found this on the forum, might be the solution.
https://generatepress.com/forums/topic/customising-primary-nav-menu/#post-103227
Lead Developer
Great solution, Jamal!
If you want to outright hide it from logged in users, you can do this:
.logged-in .secondary-navigation { display: none; }Thanks Tom & Jamal! Is it possible to make the secondary menu (placed above header) sticky so it won’t disappear when scrolling?
You could try something like this:
.secondary-navigation { position: fixed; width: 100%; top: 0; } .admin-bar .secondary-navigation { top: 32px; }the secondary nav does become hidden for logged in users, but the attempt at making it stay visible for user not logged in doesn’t seem to work. The secondary nav bar stays visible as scrolling starts, but when the header (with primary nav bar in it) transitions into the sticky aspect, the secondary nav bar just disappears.
How are you adding the sticky header? Not using the Menu Plus options to only stick the primary menu?
That is how I’m making the primary menu sticky. My hope for putting the secondary menu above the header is to make it sticky too, so it would be visible along with the primary menu when scrolling for those not logged in.
I’m also noticing that the secondary menu cuts off part of the header. I need it to affix itself to the top of the header instead of riding over the top of it.
What you could do is tell your primary navigation to sit below your secondary navigation.
For example:
.main-navigation.is_stuck, .main-navigation.navigation-clone { top: 40px; /* height of your sticky secondary navigation */ } .admin-bar .main-navigation.is_stuck, .admin-bar .main-navigation.navigation-clone { top: 72px; /* height of your sticky secondary navigation + 32px */ }As for the header, making something sticky moves the below element up under it.
You could do this:
.site-header { margin-top: 40px; /* height of secondary navigation */ }I’ve tried various combinations of these suggestions and it’s just not working. The secondary nav does stay right at the top. As I scroll down the screen, it stays there while the header (with primary nav in it) scrolls underneath it.
Then once header is gone, it switches things and the header becomes sticky (and is not as tall) and stays visible for the rest of the scrolling. But when it makes this switch, the secondary nav at the top just goes away.
You can see it at https://arlinstitute.org
From the various options above, I have this code in the CSS window:
/* Secondary Nav sticky */ .secondary-navigation { position: fixed; width: 100%; top: 0; } .admin-bar .secondary-navigation { top: 30px; } /* Keeps below element from moving under header */ .site-header { margin-top: 30px; /* height of secondary navigation */ } /* Primary Nav sits below secondary nav */ .main-navigation.is_stuck, .main-navigation.navigation-clone { top: 30px !important; /* height of your sticky secondary navigation */ } .admin-bar .main-navigation.is_stuck, .admin-bar .main-navigation.navigation-clone { top: 62px !important; /* height of your sticky secondary navigation + 32px */ }I just made a couple changes to your CSS you posted – can you re-copy it and give it another try?
That Works on desktop mode only and only when not logged in.
When logged in, the secondary nav goes away (which it should) and then I have a grey bar that is visible in its place.
On my iPhone, the header rides up underneath the secondary nav, so it’s not real visible when not logged in and sitting at the top. Scrolling down, it looks fine however.
When logged in and scrolling, the header rides real low. But you had helped me fix that problem earlier with this code
/* Brings main navigation header to top of screen */ .main-navigation.navigation-clone { margin-top: 0; }Also on desktop mode, when logged in and scrolling, the header sits low. I can see the .main-navigation code line in there twice. Once with a margin-top of zero and once at 32px, so that must be the conflict.
Let’s try this:
/* Secondary Nav sticky */ .secondary-navigation { position: fixed; width: 100%; top: 0; } /* Keeps below element from moving under header */ body:not(.logged-in) .site-header, body:not(.logged-in) .mobile-header-navigation { margin-top: 30px; /* height of secondary navigation */ } /* Primary Nav sits below secondary nav */ body:not(.logged-in) .main-navigation.is_stuck, body:not(.logged-in) .main-navigation.navigation-clone, body:not(.logged-in) .mobile-header-navigation.is_stuck, body:not(.logged-in) .mobile-header-navigation.navigation-clone { top: 30px !important; /* height of your sticky secondary navigation */ margin-top: 0; } .admin-bar:not(.logged-in) .main-navigation.is_stuck, .admin-bar:not(.logged-in) .main-navigation.navigation-clone { top: 62px !important; /* height of your sticky secondary navigation + 32px */ }What that should do is only apply the spacing CSS when the
logged-inclass doesn’t exist.That is perfect for the desktop. but iPhone still has problems. When not logged in, the header slides up underneath the secondary nav when at the top. When scrolling down, it displays just fine. But when scrolling down and it looks fine, clicking the secondary nav to log in causes the menu to expand underneath the header, so it’s not real visible. You have to scroll back to top to make the secondary nav fully visible when expanded.
When logged in, the black logged in bar that wordpress shows scrolls out of site when going down screen. I could live with that I guess, but it’s different behavior than that desktop version.
On desktop, when logged in, the black wordpress bar takes the place of the secondary nav, which is great.
- You must be logged in to reply to this topic.