The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work.

Media Code

@media (min-width: 768px) {
    .nav__btn {
        display: none;
    }
}

Styles Code

.nav__btn {
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 2.2rem;
    cursor: pointer;
}

I still want the ".nav__btn" class to have its display set to none.

cssmedia-queries

Answer №1

When multiple rulesets share the same specificity level, the rule that appears later in the style sheet will take precedence.

For example, if one rule sets an element to display: none when the screen width is over 768px, and another rule follows it with display: flex unconditionally, the element will always be displayed as a flex container.

To change the outcome, you can rearrange the order of your rulesets.

Answer №2

Make sure to place the script right before the closing body tag so that the JavaScript functions can be executed properly.

By doing this, the code will continuously monitor window resize events and dynamically adjust the display property of the ".nav__btn" element as needed.

  <script>
            window.addEventListener('resize', function() {
                var navBtn = document.querySelector('.nav__btn');
                if (window.innerWidth >= 768) {
                    navBtn.style.display = 'none';
                } else {
                    navBtn.style.display = 'flex'; // You can set any default display value you prefer
                }
            });
        </script>

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

Tips for positioning images in the center of a footer

Hello, I am new to coding and would like some help adjusting the code for this website: The footer section at the bottom of each page features a row of logos. My goal is to make sure that these logo images display properly on mobile devices (without dropp ...

css

Parent: Using Flexbox vs Child: Choosing between inline-block or inline elements (Advantages of utilizing CSS3 flexbox?)

I've been exploring the capabilities of CSS3's new "display: flex" property and trying to determine its advantages. So far, I haven't discovered any significant benefits beyond creating a virtual horizontal line within each flex box containe ...

cssresponsive-designflexbox

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

Obtain the URL link from Unsplash where the picture is sourced

As I work on a website, I incorporate a link () to display a random photo. However, the photo refreshes periodically and upon loading the site, all that is visible is this default link: . Is there a method to extract the actual source like so: "". Althou ...

javascripthtmlcss

positioning of multiple buttons in a customized header for mui-datatables

I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being e ...

cssreactjsmaterial-uimui-datatable

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Issue with a responsive CSS circle element that holds an image

I'm struggling to figure out how to create 9 responsive CSS circles in a row, with each circle containing an img tag rather than a background image. The goal is to center the img and resize it based on the size of its parent circle div. These 9 circle ...

htmlcssresponsive

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

javacssextjsseleniumselenium-webdriver

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...

htmlcssinternet-explorerresponsive-design

Close button for body

I have created a form that floats in the center of the screen On this form, I have included a button designed to close it However, I would like for the form to be closed anywhere on the screen when clicked with the mouse Here is my code: $(".offer-clo ...

javascriptjquerycssfacebox

What is the best way to create a flexible grid that automatically adjusts to either two columns or one column depending on the width of the

My challenge lies in arranging items into two columns or one, with a specific layout for mobile devices. The order of the items changes between the two column and single column layouts. The number and size of items vary dynamically. For example, in a tw ...

htmlcsscss-grid

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

javascriptjqueryhtmlcssimage

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

javascripthtmlcsscarouselslick.js

Can a sophisticated matrix-like design be created using a CSS grid system?

I'm currently working on implementing a unique grid structure in Material-UI using a CSS grid: Browse the desired complex layout here Here's the current CSS grid layout I've created with Material-UI: View the existing layout here This is ...

htmlcssmaterial-uicss-grid

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

I am facing an issue and need some help. I am working on creating a three-column page layout where the middle section is for posts, the right section is for links and references (a bit long), and the left section is fixed. My question is: How can I preven ...

javascripthtmlcss

The `required` attribute is ineffective when used with the `<form>` element

My required attribute isn't enforcing mandatory field completion before form submission. HTML Code: <!-- Modal Content --> <form class="modal-content2"> <div class="container3"> < ...

javascripthtmlcssajaxrequired

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

A method to ensure that inline <div> elements occupy the entire available width

The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue. Currently, I am dealing with three i ...

htmlcss

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...

javascripthtmlcss