Archived topic

sticky logo and navigation alignment

13 replies · Started by Moses on October 31, 2017

Viewing posts 1–14 of 14

October 31, 2017 at 11:51 am #413807

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

October 31, 2017 at 3:59 pm #413919

Hi there,

Is the navigation location set to align center?

November 1, 2017 at 2:09 am #414092

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

November 4, 2017 at 4:44 am #416005

anything?

November 4, 2017 at 7:57 am #416116

Oops sorry not sure how this slipped through.

Can you activate the sticky navigation again?

Thanks!

November 4, 2017 at 9:28 am #416164

Done

November 4, 2017 at 11:22 am #416216

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

November 5, 2017 at 1:28 am #416464

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

November 5, 2017 at 9:15 am #416595

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

November 5, 2017 at 9:24 am #416604

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

November 5, 2017 at 9:49 am #416614

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.

November 5, 2017 at 10:16 am #416626

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;
}

November 5, 2017 at 11:39 pm #416886

Thanks tom and leo !

November 6, 2017 at 9:04 am #417210

You're welcome!

This archived topic is closed to new replies.

Start building better websites today.