Menu icon Foundation

Designer | Bozeman, MT

My Posts

  • 3
    Replies
  • Magellan - 2 active links

    By Brett DeWoody

    Magellan

    I'm using Magellan on a site and Magellan is working well. The only issue is there are always 2 `active` links in the navbar. As I scroll down the page it the currently active, and previously active links are always set to active. Has anyone else encount... (continued)

    Last Reply by Andoro over 2 years ago




My Comments

Brett DeWoody commented on Brett DeWoody's post over 2 years

You can view the site at https://www.simmsfishing.com/featured-stories/wadermakers/
I added some CSS styling to eliminate the issue, but removing the active style so the Magellan links don't change color when they receive the active class.
I also tried a JS solution, trying to remove the first .active class when 2 elements had the .active class. This works partially, but results in a flickering of the the active state. 
Regardless, if you view the elements in Dev Tools you'll see the .active class applied to 2 of the elements at a time. 

Brett DeWoody commented on Ronan's post over 3 years

If you're using SCSS the values for $flex-video-padding-top, $flex-video-padding-bottom and $flex-video-margin-bottom will also help. Setting these to 0, and changing $flex-video-widescreen-padding-bottom to my video's proportions resolved the issue for me.

Brett DeWoody commented on Andy's post over 4 years

This is what the data-equalizer javascript utility is for. More info on the docs.

And here's a JS fiddle showing it in action.

Brett DeWoody commented on Brett DeWoody's post over 4 years

Adding a margin (for presentation purposes) seems to have solved this.

Brett DeWoody commented on Laurence Baker's post over 4 years

Could you please post your code.

Brett DeWoody commented on Michael Forcer's post over 4 years

I've wondered that myself @Zachary. If I wanted to build my own version of Modernizr to add tests for things like .webp images, which tests do I need to include?

Brett DeWoody commented on Jon Friedrich's post over 4 years

Here's a jsFiddle that should get you close. Depends on how you want to handle the logo at the small size.

Posts Followed


Following

    No Content

Followers

My Posts



My Comments

You commented on Brett DeWoody's post over 2 years

You can view the site at https://www.simmsfishing.com/featured-stories/wadermakers/
I added some CSS styling to eliminate the issue, but removing the active style so the Magellan links don't change color when they receive the active class.
I also tried a JS solution, trying to remove the first .active class when 2 elements had the .active class. This works partially, but results in a flickering of the the active state. 
Regardless, if you view the elements in Dev Tools you'll see the .active class applied to 2 of the elements at a time. 

You commented on Ronan's post over 3 years

If you're using SCSS the values for $flex-video-padding-top, $flex-video-padding-bottom and $flex-video-margin-bottom will also help. Setting these to 0, and changing $flex-video-widescreen-padding-bottom to my video's proportions resolved the issue for me.

You commented on Andy's post over 4 years

This is what the data-equalizer javascript utility is for. More info on the docs.

And here's a JS fiddle showing it in action.

You commented on Brett DeWoody's post over 4 years

Adding a margin (for presentation purposes) seems to have solved this.

You commented on Laurence Baker's post over 4 years

Could you please post your code.

You commented on Michael Forcer's post over 4 years

I've wondered that myself @Zachary. If I wanted to build my own version of Modernizr to add tests for things like .webp images, which tests do I need to include?

You commented on Jon Friedrich's post over 4 years

Here's a jsFiddle that should get you close. Depends on how you want to handle the logo at the small size.

Posts Followed


Following

  • No Content

Followers

  • No Content