[Resolved] sticky logo and navigation alignment

[Moses]

Hey, I had a similar problem before and was given this snippet:

.main-navigation.navigation-stick .navigation-logo {
    float: right;
}

.nav-aligned-center .main-navigation.navigation-stick {
    text-align: left;
}

But It’s not working for me this time.
I want my sticky logo to float right, and my sticky navigation to float left. site is RTL

[Leo]

Hi there,

Is the navigation location set to align center?

[Moses]

No. it was set to left,

now I re-added the above snippet and made it centred aligned so you can check it again please

[Moses]

anything?

[Leo]

Oops sorry not sure how this slipped through.

Can you activate the sticky navigation again?

Thanks!

[Moses]

Done

[Leo]

Can you try this method? https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

I believe this is the look you are going for.

Let me know 🙂

[Moses]

Hey Leo, the floats are still swapped, navigation on the right and logo on the left and I want them exactly the opposite

[Leo]

What if you set the alignment to left? https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

[Moses]

Tried, no change (you can check now it’s aligned to the left)

[Leo]

You have this CSS added which is making the logo on the left side:

.main-navigation .site-logo.navigation-logo {
    position: absolute;
    left: 0;
    top: 0;
}

Try right: 0;

I’ll check with Tom why the align left isn’t working.

[Tom]

1. Add this CSS:

.rtl .main-navigation li {
    float: left;
}

2. Remove this CSS you’ve added:

.main-navigation .site-logo.navigation-logo {
    position: absolute;
    left: 0;
    top: 0;
}

And replace it with this:

.main-navigation .site-logo.navigation-logo {
    position: absolute;
    right: 0;
    top: 0;
}

[Moses]

Thanks tom and leo !

[Tom]

You’re welcome!

[Author]

Posts