[Resolved] Sticky Menu Alignment

[Janine]

Hi.

My sticky menu is not aligned. The search icon is shifting to the second line.

How can I shift it to the first line of the nav menu?

Thank you.

[David]

Hi there,

looks like there isn’t room for it in the navigation – can i see the site ?

[Janine]

Here’s a link to my site.

It looks okay when I am in the customizer.

But when I exit the customizer and go to the site, it the search icon shits to the second line.

Thank you.

[Leo]

Hi there,

I think the easiest solution is to activate the navigation as header option:
https://docs.generatepress.com/article/navigation-as-a-header/

Then set the navigation width to full:
https://docs.generatepress.com/article/navigation-layout/

We might need a bit of CSS tweak after but we can help after you set it up first.

Let me know 🙂

[Janine]

Hi.

As did as you suggested.

Now, the the search icon has moved from the left on the second line to the right on the second line.

What can I do to get up on the first line?

Thank you.

[Ying]

Hi Janine,

Try add this CSS:

#site-navigation.main-navigation .inside-navigation.grid-container {
    padding: 0;
}

[Janine]

Hi.

I added the CSS.

It seems to be working in Chrome, but not firefox and Opera. Weird.

Any thoughts?

Thank you.

[Ying]

I tested too, all of them work well.

Make sure you clear browser cache before test 🙂

[Janine]

I did clear my cache and I still got the misaligned search icon.

I just opened the site in Edge browswer. I have never visited the site there and the search icon was misaligned.

Thank you.

[Ying]

Sorry I missed the sticky part.

Try this:

#sticky-navigation .inside-navigation.grid-container {
    padding: 0;
}

[Janine]

Thanks, Ying.

It worked.

BE SAFE.

[Ying]

Great! You too 🙂

[Author]

Posts