Magellan in Foundation - stop applying the "top" style to the element

By default, Magellan (Sticky navigation's plugin in Foundation) adds the "top" property to an element. I want to prevent this from happening because I have a fixed top bar and I want the navigation to appear underneath it. The navigation display is animated and all properties are added through CSS, so I just need to prevent top: 0px from being added directly inline on the div.

This is what my code looks like:

<div class="sticky bar" data-magellan-expedition="fixed">...</div>

And here is my CSS:

.sticky.bar.fixed {
   bottom: auto;
   padding-bottom: 6px;
   z-index: 98;
   top:45px;
   animation:subnav_sticky .2s;
   -webkit-animation:subnav_sticky .2s;
}

@keyframes subnav_sticky
{
   from {top:-33px;}
   to {top:45px;}
}
@-webkit-keyframes subnav_sticky /* Safari and Chrome */
{
   from {top:-33px;}
   to {top:45px;}
}

Is it possible to achieve this without modifying the JavaScript plugin?

htmlcsszurb-foundation

Answer №1

I stumbled upon something quite interesting.

joseluisq's Javascript solution is truly impressive. I faced a problem with adding !important to CSS as it disrupted the animation in Firefox. However, I managed to find a workaround on the Foundation GitHub repository. Surprisingly, this solution wasn't documented anywhere...

The fix simply involves inserting data-magellan-top-offset into the element. In my case, it looked like this:

<div class="sticky bar" data-magellan-expedition="fixed" data-magellan-top-offset="45">...</div>

I hope this information proves to be beneficial for others as well ;)

Answer №2

Hey there, it looks like you're interested in updating the top property for Magellan. Magellan applies the top property value using JavaScript, so one approach is to try rewriting this property with !important in your CSS for a different top navigator.
Alternatively, you can use JavaScript to adjust the top value as needed:

$(window).scroll(function(){
   $('div[data-magellan-expedition=fixed]').css('top', 'your customized top value');
});

Best of luck!

Answer №3

Here's my implementation of magellan in javascript, hoping it can benefit someone else.

To set up magellan in JavaScript, you can follow the instructions from Foundation's website

$(document).foundation({
"magellan-expedition": {
  active_class: 'active', 
  threshold: 0, 
  destination_threshold: 20, 
  throttle_delay: 50, 
  fixed_top: 0, 
  offset_by_height: true 
}
});

The key parameter to adjust is 'fixed_top' which determines the top distance of the nav element. Ensure it's set at 0 for proper functionality. Remember to load this script last to prevent any conflicts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a customized slideshow within a designated div container with specific dimensions

My div contains a slideshow of images, but only parts of the images are appearing. I tried adjusting the width and height of the images, but the issue persists. Here is a snippet of my code: <link href="./CSS/js-image-slider.css" rel="stylesheet" type= ...

javascripthtmlcss

Arrange your HTML pages using the Bootstrap 4 Navigation Bar

Inquiry: What is the standard or best practice for organizing multiple HTML sites or files with a navigation bar that should be visible on all pages? Background: As a beginner in website creation, I am working on a project to run on an ESP using Bootstrap ...

htmlbootstrap-4navbar

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

javascripthtmlcss

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate

CSP prevents CSS Modules styling from being applied when unsafe-inline is not allowed in the style-src directive

I've developed a React application using Create React App and implemented CSS modules for styling the components. Each CSS file is prefixed with .module.css. For example: ComponentName.module.css To use the CSS file within a component, I import it l ...

cssreactjscontent-security-policycss-modules

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...

javascripthtmlcss

What is the best way to customize the color of a bootstrap badge?

I'm trying to customize a bootstrap badge with a different color. As I am relatively new to frontend development, I may be asking a basic question, but I created the following CSS: .badge .badge-danger{ color:#FFFFFF; } I then added the new CSS af ...

cssbootstrap-4

Improve the loading speed of large datasets into HTML tables

I have a problem where I generate an HTML table from code behind to display data like a grid (Note: I am not using GridView). When the data is large, around 2000 rows, it causes the application to display a white page as if it has hung. What is the best w ...

asp.nethtml

What are the steps to utilize an auto-incremented MySQL key in a freshly created HTML form?

I am currently facing a challenge with two HTML forms used for registering products in an RMA system. The first form is quite simple, and I have no trouble saving the data to the database. However, I encounter an issue when trying to retrieve the auto-incr ...

phphtmlmysqlformsphp-mysqlidb

Placing an Image in the Right Corner Using jQuery Mobile

I am currently developing a mobile app and I need to align three images one below the other at the right corner next to some text. Any suggestions would be greatly appreciated. Thank you in advance. Below is my code snippet: <div> <ul data-r ...

htmlcssjquery-mobile

Having trouble with jQuery show/hide not functioning properly?

My website has a sub-menu section with a shopping cart icon. When a user hovers over the icon, it reveals a hidden cart section. The user can then move the mouse into the cart section to remove items. The problem I'm facing is that if a user displays ...

javascriptjqueryhtml

Resolving problems related to window scrolling in javascript for implementing a "sliding door" style animation triggered by a scroll event

I am new to web development and I have been working on creating a portfolio website to learn. I have seen some websites with really cool effects on their landing pages and I would like to incorporate something similar into my site. Specifically, I am inte ...

javascripthtmlcssevent-listener

VueJS effects when elements are added and removed

I'm currently diving into VueJS and struggling to tackle this issue with transitions. My project includes two components - ComponentA and ComponentB. Let's take a closer look at them: ComponentA: <template> <div id="ComponentA"> ...

javascriptcssvue.jsvuejs2

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

Can the submission of a form be prevented in PHP after encountering a ctype_digit error?

As a new learner in PHP, I am trying to figure out how to prevent the form from submitting to MySQL if the user enters anything other than an integer in the Age field. Below is the basic form and code I have: add.html-> <form action="add.php" m ...

javascriptphpcssmysql

What steps can I take to implement automation for this traffic light sequence?

document.getElementById('SwitchButton').onclick = automateLights; function turnOnRedLight() { clearAllLights(); document.getElementById('stopLight').style.backgroundColor = "red"; } function turnOnOrangeLight() { clearAllLights( ...

javascripthtmlcss

How can I stick the footer to the bottom of the page?

I've tried numerous codes in an attempt to make the footer stay at the bottom of the page, however, none of them seemed to work. Here's my footer tag: <footer class="container py-5 navbar-fixed-bottom"> The following div is: <di ...

htmldjango-templatesfooter

Tips for updating the submit button title in HAML

Just getting started with Haml, I have a form that contains two submit buttons. In order to differentiate and handle them in the Controller, each button requires its own unique name. For example, in HAML: = program_form.submit I18n.t('texts.6OA&apos ...

htmlruby-on-railsrubyhaml

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

javascriptjqueryhtmlcssjquery-validate