Site logo

Archived topic

WooCommerce Menu Cart icon jumps within sticky navigation

15 replies · Started by Kim on January 23, 2017

Viewing posts 1–15 of 16

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

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

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...

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

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

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.

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?

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/

Great, thanks for the tip:) Kim

No problem :)

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.

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

Are you able to provide a link to your site?

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.

This archived topic is closed to new replies.