Establishment - Maintaining menu positioning without disrupting sticky functionalities

This is my first time using Foundation and I came across the "Magellan" menu feature, which makes the navigation sticky after scrolling down.

Although this feature works well for me, I encountered a challenge. I need to position the menu at the bottom of the window right after the header, which has 100% height. I tried using margin-top and relative positioning to achieve this, but both methods interfered with the sticky menu function.

With the margin-top method, the menu became sticky but had its own margin, causing it to disappear at the top of the window.

I have included a picture illustrating what I am trying to achieve. The left side shows my current setup, while the right side depicts the desired outcome.

In essence, I need to move the menu up to the bottom of the window while maintaining the functionality of the "Magellan sticky feature." Can anyone provide assistance with this issue?

htmlcssmenusasszurb-foundation

Answer №1

here is a suggestion for your CSS

.magellan-wrapper{
    position:relative;
    bottom:0;
}

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

Choosing multiple classes using Xpath

<div class="unique"> <a class="nested" href="Another..."><img src="http://..."/></a> <p> different.... </p> <p><img src="http://....." /></p> </div> I have this interesting HTML struc ...

pythonhtmlxpathhtml-parsinglxml

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

javascriptjqueryhtmlcssdjango

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

javascripthtmliframeembedded-resource

Using jQuery to retrieve the nth child from a table after dynamically creating it with AJAX

When using AJAX in the code below, I fill and create simple data after retrieving it. $.ajax({ method: 'GET', url: '/analyzePage/searchTag/' + tagName, contentType: false, processData: false, success: function (data ...

javascriptjqueryhtml

Tips for correcting the sentence that extends beyond the boundaries of the Material UI box

Utilizing Material UI for my project... I am trying to contain the text within a box but facing issues with responsiveness as the text is overflowing outside of the box. Note: I have attempted various solutions from Stack Overflow such as word-wrap, max- ...

cssreactjsmaterial-ui

Picking the Following ID Using JQuery Selector

HTML: <div id="videos"> <a href="javascript:loadAndPlayVideo('QXoIMTjk9Xg')"><img src="http://i.ytimg.com/vi/QXoIMTjk9Xg/default.jpg" id="thumb_QXoIMTjk9Xg"></a> <a href="javascript:loadAndPlayVideo('nWubf ...

jqueryhtmljquery-selectorscss-selectors

Steps for changing the direction of a dropdown menu to the left instead of the right

I'm having a bit of an issue with my inbox setup. I have a dropdown for it, but the dropdown is appearing off to the right and since it's at the end of my top navbar, it's not very visible. Here is the CSS code for the inbox: .notification ...

htmlcss

Using Angular2, you can dynamically assign values to data-* attributes

In my project, I am looking to create a component that can display different icons based on input. The format required by the icon framework is as follows: <span class="icon icon-generic" data-icon="B"></span> The data-icon="B" attribute sp ...

htmlangulartypescriptangular-cli

Confirmation of numerous checkbox selections

I am facing a challenge with a form that contains multiple questions answered through checkboxes. I need to validate that at least one checkbox is selected in all the questions, otherwise an alert message should pop up. Is it possible to achieve this val ...

javascriptjqueryhtml

Produce an additional page while remaining on the present one

I have a PHP-based invoice system that displays all customer invoices. I am interested in adding a feature that allows users to print an invoice directly from the list page without navigating away. While I am familiar with window.print() and media="print" ...

javascriptphpcsshttp

Is it possible to implement addEventListener.delay() functionality?

Hello, I am working on a Qualtrics code that utilizes jQuery. I am looking to incorporate a delay function for event listening in my code, which currently allows key presses as inputs. Specifically, I need to disable the keys for the initial 2000ms before ...

javascriptjqueryhtmlqualtrics

choose several options simultaneously

<select class="form-control default-select2 " id="group" data-size="10" data-live-search="true" data-style="btn-white" multiple="multiple"> <option value="" disabled="disabled" selected="selected">Choose Group</option> <!-- <o ...

phphtmlbootstrap-4

Having difficulty setting up page titles in AngularJS

Using AngularJS, I am developing a web app that is not a single page application but all the code is contained in one file- index.ejs. The setup for my index.ejs file looks roughly like this: <head> <title> Main Page </title> </he ...

htmlangularjsuiviewsingle-page-applicationangularjs-ng-template

jQuery Hide/Show Not Working as Expected

I am currently developing a Single Page Application using jQuery along with Semantic and Bootstrap for the UI. I have encountered an issue where jQuery is struggling to hide and show two elements on the same level, even though it works fine elsewhere in th ...

javascriptjqueryhtmlsingle-page-application

Issues with Image Loading in Azure WebMatrix

I am currently using WebMatrix to host my website, but I'm facing some issues with certain elements not loading correctly. Specifically, I have two pictures on my site that are linked to a directory on my local machine. I would like to know how I can ...

htmlcssazure

Translucent tonal backdrop hue

Is there a creative solution to dynamically increase the width of a border up to a certain point, using the thickness of the border as a progress bar indicator while reusing defined colors in stylesheets? Currently, I have the element with the border nest ...

htmlcss

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

htmlcss

achieving outcomes beyond iframe boundaries

I currently have an IFRAME that is responsible for loading my login page. Here is the code: <iframe src="loginForm.html"></iframe> Once the form in the IFRAME is submitted, I am looking for a way to retrieve and display the results on the p ...

javascriptphphtmlcss

Utilize Wildcards in PowerShell Script to Find and Replace Multiple Instances of a String in Sharepoint 2013

Managing a website on SharePoint 2013 has been quite a challenge, especially when trying to use PowerShell scripts to update outdated content within webparts. Despite numerous online examples, I am struggling to properly utilize wildcards in the replace fu ...

htmlpowershellsharepoint-2013

Fixing alignment and responsiveness problems with a hovering circle div

I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...

htmlcssresponsive-design