[Resolved] Previous/next arrows for horizontal scroll secondary navigation

[Dorin]

I’m using the secondary navigation as a horizontal scroll menu with arrows that show/ hide depending on the menu position. These are shown only on mobile. I got this working almost all the way, pretty happy with how it came out – maybe I’ll post the code for anyone interested. The only issue I’m having right now is that arrows have position: fixed;, so they stick as the user scrolls down. Any idea on how to keep the arrows on the same line as the menu when scrolling down? Using anything else than the fixed position makes them dissapear. The arrows were defined as menu items. I know I’m using z-index in there, they still show behind the images without z-index. Anyway, I’m missing something here, but I feel the fix might be quite simple. Any help is much appreciated.

[Elvin]

Hi Dorin,

You should use position: absolute; instead of fixed and apply the css on the li container of the svgs instead of directly on the svg icon.

Example:

li#menu-item-2686 {
    position: absolute;
    left: 10px;
    margin-top: -1px;
    color: #000000;
    padding-right: 10px;
    padding-left: 20px;
    margin-left: -15px;
}

li#menu-item-2687 {
    position: absolute;
    right: 10px;
    margin-top: -1px;
    color: #000000;
    padding-left: 10px;
}

You can use this as starter and modify/improve it to your preference. 🙂

[Dorin]

Brilliant stuff, Elvin. Thanks so much.

[Elvin]

No Problem. Let us know if you need further help. 😀

[Robert]

Hi Dorian,
I am interested in your horizontal menu code!
Could you provide a link to see it in action (if you are still happy to share the code )
Thanks,
Rob

[Robert]

Apologies, Dorin.

[Author]

Posts