Archived topic
Option for left and right inside nav bar
11 replies · Started by Michelle on June 3, 2021
Hi there,
So this is a feature request to have 2 nav bars. One that can be centered & one that can be right.
I'm launching a new social media community for my non profit, and we can't get the bell notification to stick on the right side of the top nav.
See how it's flush left & the nav isn't centered & so the bell & envelop aren't flush right? That's what Youzify did https://nimb.ws/cWe1dp
Thanks
Michelle
Hi Michelle,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hi Ying,
So I put the link below.
My website coder fixed the problem, but maybe for other things that feature would be helpful down the road.
Thanks
Michelle
Glad it's working for you now.
Your navigation has quite a few custom CSS added, so the center option seems not to work well.
To left/right align 2 part of navigation, I believe it just needs a little bit CSS.
Let me know if you need further help :)
Hi there,
Ok, we noticed that while his hack works logged in, it doesn't work logged out (it pushes the nav to the right b/c there's no bell notification) so yes, if you have CSS code.
He would like to use the real CSS code for center/right align 2 part of navigation if you have it, not the CSS hack.
Thanks
Michelle
1. Could you remove this massive margin you added to the login menu item?
https://www.screencast.com/t/RF4ajsUyWjY
2. Could you create a login for me? Post it in the private info field so I can log in and see the bell and envelope icons.
3. Just to confirm, you want the menu items to be in the center, and the icons to be on the right on the desktop?
Let me know :)
1. Done
2. Done see below
3. Yes
4. Just a reminder that it needs to look the same logged in & logged out, although when not logged in, the bell & envelop don't show up.
Thanks a ton
Michelle
Try this CSS:
@media (min-width: 769px) {
#primary-menu {
width: 100%;
}
.main-navigation .main-nav>ul>li:nth-child(1) {
margin-left: auto;
}
.main-navigation .main-nav>ul>li:nth-child(4) {
margin-right: auto;
}
.main-navigation .main-nav>ul>li:nth-child(5) {
margin-left: -120px;
}
}
Let me know :)
Hi Ying,
Sorry for the delay. I lost my Internet all day yesterday.
Close. : )
The Login needs to be next to the Register link.
Thanks a ton
Michelle
No worries, try this one instead:
@media (min-width: 769px) {
#primary-menu {
width: 100%;
}
.main-navigation .main-nav>ul>li:nth-child(1) {
margin-left: auto;
}
.logged-in .main-navigation .main-nav>ul>li:nth-child(4) {
margin-right: auto;
}
.logged-in .main-navigation .main-nav>ul>li:nth-child(5) {
margin-left: -120px;
}
.not-logged-in .main-navigation .main-nav>ul>li:last-child {
margin-right: auto;
}
}
Thank you VERY VERY much.
Hugs & have a good one.
Michelle
You are very welcome :)