Conceal the div on larger screens and display it on mobile devices

I have a fixed navigation bar at the top of my website. By default, it is always visible on all pages, but I want to hide it on desktop screens and display it only on mobile devices.

Here is what I have implemented:

@media (min-width: 992px) {
    #sp-header-sticky-wrapper {
        display: none;
        visibility: hidden;
        clear: both;
        font-size: 0;
        max-height: 0;
        line-height: 0;
        height: 0px !important;
        padding: 0;
        (optional) mso-hide: all;
        (optional)
    }
    div#sp-header-sticky-wrapper.sticky-wrapper {
        display: none;
        visibility: hidden;
        clear: both;
        font-size: 0;
        max-height: 0;
        line-height: 0;
        height: 0px !important;
        padding: 0;
        (optional) mso-hide: all;
        (optional)
    }
}

For mobile devices:

@media (max-width: 991px) {
    #sp-header-sticky-wrapper {
        display: block !important;
        visibility: visible;
    }
    div#sp-header-sticky-wrapper.sticky-wrapper {
        display: block !important;
        visibility: visible;
    }
}

While this setup works well for mobile usage, there's an issue in desktop mode. Whenever I click a link, the hidden navigation bar briefly appears for a fraction of a second before disappearing again. This causes the website to 'jump' slightly when reloading a page.

Is there a solution to this problem? Should I consider using JavaScript, or is that not feasible?

javascriptjqueryhtmlcsshide

Answer №1

This article I found is a game-changer when it comes to understanding media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

A tip worth noting is to steer clear of using visibility: visible/hidden and opt for display: none/block instead for improved results.

Here's how I like to organize my main styles:

.desktop-div { display: block; }
.mobile-div { display: none; }

@media { .desktop-div { display: none; } .mobile-div { display: block; } }

Answer №2

To achieve this, implement a media query:

@media (min-width: 1200px) {
    #specific-div {
        visibility: hidden;
    }
}

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 unable to retrieve dynamic data from the database

Storing data in a MySQL database has been successful for me. I've been utilizing PDO in PHP to fetch the data and then converting it to JavaScript using json_encode. However, I keep encountering the output NaN when implementing a specific scenario. It ...

javascriptphpjquery

Steps to set up a MessageCollector on a direct message channel

Hey everyone, does anyone have any tips on setting up the message.channel.createMessageCollector function for a direct message? I attempted to use message.author.dmChannel.createMessageCollector but it didn't work for me. Any advice? ...

javascriptdiscorddiscord.js

Round Slider maintains the image quality by preserving the pixel count even as the slider value decreases below

My slider code is functioning well, except for the issue of blurred pixels appearing unnecessarily when the value goes below 64. Is there a way to eliminate these faded dots? $("#handle2").roundSlider({ sliderType: "min-range", radius: "100%", ...

javascriptjqueryslidergaugeround-slider

Is there a way to prevent Accordion propagation once it has been clicked for the first time?

I am facing a challenge with my accordion setup in Material-UI. I have an Accordion that contains a TextField inside the AccordionSummary. When the TextField is clicked, it opens the AccordionDetails where the rest of the form is displayed. However, I&apos ...

javascriptreactjsmaterial-ui

presentation not transitioning smoothly as the next slide appears

Initially, my aim is to center the slideshow on the page but I am uncertain about how to achieve it. This is how my current webpage appears: https://i.sstatic.net/E6bzQ.png Furthermore, as shown in the image, the sliding effect of the blue slide is movi ...

cssreactjs

Convert Python strings into HTML JavaScript blocks using Jinja2

Having trouble passing a string to an HTML page in the "<script>" block. I am currently using Python, Flask, and Jinja2. Python code: def foo(): return myString #"[{title: 'Treino 7-Corrida',start: '2015-12-08',color: '#d ...

javascriptpythonhtmlflaskjinja2

Canvas flood fill is having trouble reaching the edges

While utilizing a flood fill algorithm to fill circles drawn on the canvas, I've encountered an issue where the algorithm fails to fill right up to the edge of the circle. Here is the implementation of the algorithm based on this blog post: function ...

javascripthtmlcanvasflood-fill

Obtain the string value of `reader.result` from the `FileReader

Struggling to retrieve a string in a reader.onloadend but it's constantly returning my entire function. Here is the function I'm using: uploadFile() { let vm = this; var file = vm.$refs["testeLogo"].files[0]; var reade ...

javascriptimagefunctionvue.jsbase64

How can I incorporate fetch into my code using VSCode?

I am completely new to using JS. I want to incorporate fetch in VSCode, but I'm having trouble importing it. When I try: import fetch from "node-fetch"; I get this error: (node:19856) Warning: To load an ES module, set "type": &q ...

javascriptnode.jsvisual-studio-codefetch-api

Error occurs when incorporating OrbitalControl into Three.js leads to TypeError

Attempting to incorporate OrbitalControls into a Three.js Script to allow users to view two spheres in an empty space. However, upon running the code, the following error is encountered: three.js:5353 Uncaught TypeError: Cannot read property 'center& ...

javascriptthree.js

Can JSON values be multiplied together?

Can you assign the value of a key in JSON by using the result of multiplying/adding two variables, values, strings+number, or strings+strings? Is this feasible? For example: { "string": "600*"+40 } ...

javascriptjson

How can I remove the border of an image hyperlink using CSS?

Let's consider the following situation: I have defined the CSS rule a { color: Red } When using Internet Explorer, if I have: <a href="..."> <img src='...' /> </a> it results in a red border around the image. How can ...

css

Attempting to store form data in a database using PHP has proven to be unsuccessful in my efforts

I am facing an issue while trying to add HTML form data into the database using PHP. Unfortunately, I am unable to successfully insert the HTML form data into the database and I'm not sure what mistake I might be making in my code. Below is the code ...

phphtmlmysqlmysqliforms

Utilizing Paragraph Styles Within a CSS Stylesheet

I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...

cssxhtmlstylesheet

Fetching images stored on an external website and loading them into an iframe within an Electron application

I am contemplating turning my website into a desktop application using either an iframe or webview within an Electron app. My website contains numerous images that I wish to cache in the Electron app to prevent repeated downloads. Is it possible to access ...

javascriptiframewebviewelectron

Loading page data, jQuery will automatically set the selected option

I am facing an issue with a page that utilizes jQuery to load an option dropdown upon page load. The loading part works perfectly fine. However, my goal is to set the selected option in the dropdown based on the querystring - defaulting it if there isn&apo ...

jqueryjson

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

javascripthtmlcss

Missing HTML escape sequences following conversion to a string

The Android test was successfully run using the following code: public static void test() { String text="<html>" + "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\" /> ...

javaandroidhtmldom

Tips for choosing the remaining items in a multiple selection process

In my HTML form, I have a multi-select field that contains categories and the corresponding items within each category. My goal is to allow users to select individual courses or select an entire category (identified by values starting with "cat_") in orde ...

javascriptjquery

Suggestions for the AJAH Library

Currently, my application is built on classic ASP. I am interested in incorporating AJAX-style partial page updates to improve the user experience and avoid unnecessary server roundtrips. My goal is to have a list of rows displayed with the option to add ...

javascriptajax