[Resolved] WooCommerce Menu Cart icon jumps within sticky navigation

[Kim]

Hi!

I’m trying to get a WooCommerce cart-plugin called Menu Cart Pro (places a cart-icon in the navigation menu) to play nicely with GP. I’ve set the primary navigation to ‘sticky’, and for some reason, when I scroll down the page and the navbar changes from its normal to its ‘sticky’ mode, the cart icon jumps and changes positions (from left of search/hamburger icons to the right of them). You can see the phenomenon live here.

Wasn’t quite sure whether to ask you or the Menu Cart guys first, but I have to start somewhere…

Kim

[Tom]

Strange, what happens if you change your navigation alignment in “Customize > Layout > Primary Navigation” to “Left”?

[Kim]

Same thing I’m afraid:( I did try quite a few different combinations (Navigation Allignment Right/Left/Center, Navigation/Inner Navigation Width Contained vs. Full etc.) and nothing seems to affect the behaviour. Weird…

[Tom]

Can you give this CSS a try?:

.nav-float-right .navigation-clone.main-navigation .menu > li.slideout-toggle,
.nav-float-right .navigation-clone.main-navigation .menu > li.search-item {
    display: block;
    float: right;
}

[Kim]

Sorry to be such a drag, but phenomenon remains the same even with the css…

[Tom]

Can you try copying the CSS directly from this topic instead of the email? It looks like the > characters were converted in your email client.

[Kim]

I did copy it from the topic, however, as I just found out, I only copied what was visible inside the white ‘frame’ in your post… Now that I copied all of the code including the bits to the right of the frame it works fine:)

The whole menu still jumps about a centimetre to the right every time the navbar enters ‘sticky mode’, as if normal/sticky navbar have different container widths. Might this be due to my settings?

[Tom]

That’s happening because when it’s not sticky, it’s using your header which has left and right padding.

You can remove your header and use your navigation as a header pretty easily using the instructions at the bottom of this article: https://docs.generatepress.com/article/sticky-navigation/

[Kim]

Great, thanks for the tip:) Kim

[Tom]

No problem 🙂

[Susanne]

Hello, Just reading this while trying to figure out the same problem, but the article you referred to at https://docs.generatepress.com/article/sticky-navigation/ does not seem to contain the instructions for removing the header. Is it still somewhere to be found?

[Leo]

Hi there,

I think this is what you are looking for: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Let me know.

[Susanne]

Hi Leo, yes thanks, that is the document, but that still does not resolve the problem that the sticky navigation jumps. Should it not stay in the same position when switching from the regular header? I believe that was Kim’s problem and it is mine too.

[Leo]

If you follow all the steps in the article then it shouldn’t.

Are you able to provide a link to your site?

[Susanne]

Hi Leo,
sorry I am developing locally, but i just looked at another GP site and I applied the same settings and it worked, so it must be something else I am doing. Yikes. Thanks for your feedback i report back when I find it.

[Author]

Posts