Site logo

Archived topic

Option for left and right inside nav bar

11 replies · Started by Michelle on June 3, 2021

Viewing posts 1–12 of 12

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.

https://nimb.ws/nAoNiY

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 :)

This archived topic is closed to new replies.