Menu icon Foundation
Align magellan container to right

Hi,
I do appreciate the effort pretty much, and would like to say that I am using Foundation CSS at my 3 independent projects.

I want to know, whether it is possible to align the magellan container when user scrolls down. In other words, I want magellan div located at the right side instead of left, when user scrolls down the page.

Thank you for your interest in advance!
Best,
Visam

Magellan

Hi,
I do appreciate the effort pretty much, and would like to say that I am using Foundation CSS at my 3 independent projects.

I want to know, whether it is possible to align the magellan container when user scrolls down. In other words, I want magellan div located at the right side instead of left, when user scrolls down the page.

Thank you for your interest in advance!
Best,
Visam

Rafi Benkual about 5 years ago

In css I did it using:

    .sub-nav {
      float: right;
    }

Make sure your markup has fixed class:

<div data-magellan-expedition="fixed">

visam about 5 years ago

Hi Rafi,
Thank you for your input, however, I does not seem to work. Inspecting the page I figure I should apply
float: right ! important;

to

[data-magellan-expedition] .sub-nav
but this also does not do the job. What to do?

Best,
Visam

Brandon Arnold about 5 years ago

This isn't something Magellan can do, as magellan just causes the navigation to be fixed position. When it's fixed position it's removed from the flow and so has no bearing on the position or width of the parent container. There may need to be a another plugin for this instance.

Brandon Arnold about 5 years ago

This codepen has it figured out

http://codepen.io/jamesdarren/pen/ivmcH

Dominick Designs over 1 year ago

hello, I know it's been 3 years but I think there should be a different way of doing this. 

 

My goal:

have a menu on right that is sticky (visible while scrolling) and is a magellan (click and it jumps to spot on page).

 

Is there a way you can help me achieve this? Here is my codepen so far:

 

https://codepen.io/dominick_designs_websites/pen/WORWow?editors=1100

 

Thanks for your support,

 

Dominick