Clicking on the menu in mobile view will cause it to slide upward

I have implemented sticky.js on my website and it is working well. However, when I resize the browser to mobile view and click the main menu button, it goes up and I am unable to close it. I have to scroll up to see it again. How can I make it stick to the top and show the subsets properly?

Check out the live demo

This is the jQuery code I am using:

jQuery(document).ready(function(){
    jQuery("#header").sticky({
        className : 'sticky-header'
    });
});

If you need more details, please let me know.

javascriptjquerycssresponsive-design

Answer №1

For the CSS rule in .sticky-header ul.slimmenu, modify the properties as follows:

font-size:32px;
position:fixed;
top:50px;
box-shadow:none;

The goal is to have it positioned 50px from the top to avoid overlapping with the menu bar, and make it fixed so it remains in place.

It's important to enclose these changes within a media query to ensure they only impact the mobile version and not disrupt the desktop layout.

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

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

Is there a way to trigger a tag when the user shares their location with the browser? I attempted using the following code within a custom JavaScript variable in my GTM Container, but it didn't seem to work. navigator.permissions && navigator ...

javascriptgoogle-tag-manager

Running Jasmine asynchronously in a SystemJS and TypeScript setup

I am currently executing Jasmine tests within a SystemJS and Typescript environment (essentially a plunk setup that is designed to be an Angular 2 testing platform). Jasmine is being deliberately utilized as a global library, rather than being imported vi ...

javascripttypescriptjasminesystemjs

Issue: User is being redirected from "/login" to "/home" due to a navigation guard. This problem arises in the interaction between Vue-router and Firebase authentication

I'm currently working on an app that utilizes Vue.js and Firebase for authentication. I am trying to implement a verification process using the beforeEach method in my router file to ensure that users can only sign in if their displayName matches a sp ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Is there a way to stack multiple divs on top of each other in my HTML login page?

Below is the HTML code for my form: <div style="display:block; margin:0 auto;"> <h2>Welcome</h2> </div> <div id="box"> <div id="box2"> <p id="pid"><b>Em ...

htmlcss

Error: Uncaught ReferenceError: d3 is undefined. The script is not properly referenced

Entering the world of web development, I usually find solutions on Stack Overflow. However, this time I'm facing a challenge. I am using Firefox 32 with Firebug as my debugger. The webpage I have locally runs with the following HTML Code <!DOCTYP ...

javascriptjquerytwitter-bootstrapd3.js

What is the best way to update a Vue.js input element using JavaScript?

Looking to use a Vue.js input for automated testing purposes. How can I successfully set a value and submit it without it being automatically changed back to default data? I have tried the following method to set the value, but it keeps getting overridden ...

javascriptvue.jsvue-componentrobotframework

Blend the background color seamlessly with the image without affecting the content

Take a look at the JS Fiddle provided below, it should clarify things. Right now, I have applied a negative margin to the image causing it to overlap the entire red block. What I'm actually aiming for is to have the image overlap only the red backgrou ...

htmlcss

Using the ng-class directive to dynamically set classes based on the value returned from

I am facing an issue with setting the icon style based on a value returned from the controller. The console log confirms that the value is triggered correctly, but it appears that there is a problem with the Ng-class expression. Any assistance on this matt ...

javascriptcssangularjshtmlionic-framework

Can a website be designed to mimic the style of the current operating system?

Is there a way to apply CSS styling to web site elements, such as buttons, that mimics the appearance of operating system (Windows, macOS, Linux) button styles? This would allow HTML buttons to automatically adjust their CSS style whenever I switch theme ...

htmlcss

Displaying retrieved data following AJAX request in ASP.NET MVC is currently not functioning

I have a situation where I need to populate two <p> fields with text Below is the HTML code snippet: <p id="appId" style="visibility: hidden;"></p> <p id="calculationId" style="visibility: hidden;"></p> I am making an AJAX ...

javascriptjqueryasp.netajaxasp.net-mvc

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml

Will terminating a Google Cloud Storage stream impact network usage?

As part of my project, I am developing a media server that will serve streamable audio files. To reduce the number of requests to Google Cloud Storage, I have implemented a caching system. However, one issue I've encountered is that Chrome sends two ...

javascriptnode.jsexpressstreaminggoogle-cloud-storage

Creating and implementing a HTML template from scratch, devoid of any frameworks

Is there a way to create a quiz where all questions follow the same format and only one question is displayed at a time, without duplicating code? Perhaps using a template would be the ideal solution in this scenario. I appreciate your help. ...

javascriptjqueryhtmltemplatestemplating

The integration of the jQuery validation plugin with .ajax functionality

Currently, I have a form that dynamically loads divs as I progress through asking for different user input and presenting some offers. Here is the code snippet: $("#calcPrice").click(function() { $("#invPricing").validate({ rules: { ... }, mes ...

jqueryajaxvalidation

Error: Controller not found when angular.module is called from different files

As I am restructuring my code to make it more modular, I decided to move the controller into a separate file that belongs to the same module. However, I am facing an issue where the controller does not load, even though I have verified that the load order ...

javascriptangularjsmoduleangularjs-controllercontrollers

Navigation Menu in Motion

I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling o ...

javascripthtmlcssnav

I am looking to eliminate any special characters from a designated section of a string using Javascript

I have a string that looks like this: var myString = '{"key1":"value1", "key2":"value2", "key3":"value3"}'; My objective is to remove double quotes and other special characters only from value3. Sometimes the string may look like: var myStrin ...

javascriptjqueryajaxjsonstring

Incorporate the ability to display a shape on a map when hovering over a table element, without the need to manually code a JavaScript function for every instance

I came across a script online that allows me to hover over text and have a shape appear on an imagemap. It's functional, but only works for a single instance. Is there a way to implement a JavaScript that handles individual instances so I don't h ...

javascriptexternalonmouseoverimagemap

What is the best way to extract multiple variables from a function in JavaScript?

After creating the function buttonEffects() with four different button effects, I am now facing the challenge of bringing these variables outside of the function and using them in another function. Is it possible to achieve this without recoding everything ...

javascriptjquery

Question about sending multiple Axios POST requests with parameters

I'm new to Stack Overflow and seeking help with a specific issue on my Rails backend and Vue.js frontend website. The challenge I'm facing involves making two POST requests simultaneously when the submit button is clicked. My "Trips" controller ...

javascriptpostvue.jsparametersaxios