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

Looping through an array of objects in VueJS can become a bit tricky when dealing with objects whose properties are dynamic. How can I efficiently

I am looking to create a matrix display from an array of objects, but the properties of the objects may change over time. Here is an example of the data: [ { location: "Japan", webhookStatus: "Up", authenticationStatus: &q ...

htmlcssvue.jsvuejs3

How can I verify if a user is logged in using express.Router middleware?

Is there a way to incorporate the isLoggedIn function as a condition in a get request using router.route? const controller = require('./controller'); const Router = require('express').Router; const router = new Router(); function isLo ...

javascriptnode.jsexpressauthenticationroutes

JavaScript - Retrieve all properties and methods of an object

Can an object created through a constructor function have its keys listed using the Object.keys() method? Let's consider an example with the following code: function Foo () {} Foo.prototype.bar = 'bar'; Foo.prototype.baz = 'baz'; ...

javascriptconstructor

What order does JavaScript async code get executed in?

Take a look at the angular code below: // 1. var value = 0; // 2. value = 1; $http.get('some_url') .then(function() { // 3. value = 2; }) .catch(function(){}) // 4. value = 3 // 5. value = 4 // 6. $http.get('some_url') ...

javascriptangularjs

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

javascriptjqueryhtmlinternet-explorer

How to determine button placement based on the content present on the page

I'm struggling to find the right CSS positioning for a button on my page. I want the button to stay fixed in a specific location, but when there's a lot of content on the page, I need it to adjust its position accordingly. Initially, I want the ...

javascripthtmlcssbuttoncss-position

implementing geolocation using jquery and javascript

I am currently learning JavaScript and experimenting with the geolocation function in my HTML and PHP code, following a tutorial like this one. Here is the code snippet I added to my custom.js file: $(document).ready(function() { 'use strict&apos ...

javascriptjquery

The MVC JQuery Ajax request is not yielding any results, yet there is no error message being returned

Below is my front end request let endpoint = "@Url.Action("Testerosa", "Attendance")"; $.get(endpoint, function(response) { debugger; alert(response); }).fail(function (error) { alert(error); }); This is th ...

jqueryasp.net-mvcjson

What is the best way to access the current Google account signed in on an Android device using jQuery and Cordova?

Is it possible to retrieve the currently logged in Google account on Android devices using jQuery and Cordova? $(function(){ $('#LoginForm').submit(function(){ var loginData = $ ("#LoginForm").serialize(); ...

androidjquery

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

javascripthtmlcssmobile

Vitest encountered an issue fetching a local file

I am currently working on testing the retrieval of a local file. Within my project, there exists a YAML configuration file. During production, the filename may be altered as it is received via a web socket. The code functions properly in production, but ...

javascripttypescriptfetch-apivitest

Using jQuery to compel a user to choose a value from the autocomplete suggestions within a textarea

Currently, I have implemented a snippet that allows the user to choose cities from a list and insert them into a textarea separated by commas. However, I am looking to enhance this feature. I want the user to be able to search for a city by typing a part ...

javascriptjqueryautocompletejquery-ui-autocomplete

The sorting of objects by Lodash is not accurate

My aim is to arrange objects based on a specific property (price). var arr = [{ name: 'Apple', price: '1.03' }, { name: 'Cherry', price: '0.33' }, { name: &apo ...

javascriptarraysobjectlodash

Combining React with Typescript allows for deep merging of nested defaultProps

As I work on a React and Typescript component, I find myself needing to set default props that include nested data objects. Below is a simplified version of the component in question: type Props = { someProp: string, user: { blocked: boole ...

javascriptreactjstypescriptreact-props

Parsing JSON data retrieved from an aspx file

I recently created an aspx file to act as a JSON result. Response.Clear() Response.ContentType = "application/json; charset=utf-8" On another page from a different domain, I attempted to read the JSON data. However, upon calling the JSON value, I encount ...

jqueryasp.netjson

Ways to Toggle div Visibility for Elements with Identical Class Names on an Individual Basis

After searching for solutions on stackoverflow, I attempted to implement some answers provided by other users, but I'm still not achieving the desired outcome. In my website's about section, there are four different items. When a specific item&a ...

javascriptjqueryhtmlcss

Create a unique type in Typescript that represents a file name with its corresponding extension

Is there a way for me to specify the type of a filename field in my object? The file name will consist of a string representing the name of the uploaded file along with its extension. For instance: { icon: "my_icon.svg" } I am looking for a ...

javascripttypescripttypestypescript-typingsreact-typescript

Help needed with parsing nested JSON using the $.each function

Here is a JSON response sample that needs to be parsed in a more generic manner, rather than using transactionList.transaction[0]. "rateType": interestonly, "relationshipId": consumer, "sourceCode": null, "subType": null, "transactionList": { "transac ...

javascriptjqueryjson