The div element is failing to respond to the display:block property

I am experiencing an issue with making my display responsive. I have two sets of navigation menus - one is displayed and the other is hidden on page load. However, when the screen size is 480px or below, the main site nav menu is hidden as expected but the mobile nav menu does not appear.

Below is the code I am currently using. Any help would be greatly appreciated.

@media screen and (max-width: 480px) {
  .mn-nav {
    display: block;
  }

  .main-site-nav {
    display: none;
  }
}
<div class="container">
  <div class="mn-nav" style="display:none;">
    <div class="col-md-12">
      <select width="100%" name="m-nav">
        <option value="select">Profile Menu</option>
        <option value="social">Social</option>
        <option value="profile">My Profile</option>
        <option value="media">My Media</option>
      </select>
    </div>
  </div>

  <div class="main-site-nav">
    <div class="col-md-3">
      <button id="social-button" style="width:100%;" class="btn btn-primary">Social</button>
    </div>

    <div class="col-md-3">
      <button id="profile-button" style="width:100%;" class="btn btn-primary">My Profile</button>
    </div>

    <div class="col-md-3">
      <button id="media-button" style="width:100%;" class="btn btn-primary">My Media</button>
    </div>

    <div class="col-md-3">
      <a href="/logout">
        <button style="width:100%;" class="btn btn-danger">Logout</button>
      </a>
    </div>
  </div>
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3media-queries

Answer №1

Your unique style is being applied, but the inline display style is overriding the stylesheet, rendering it redundant. To resolve this issue, remove the inline style and incorporate it into the stylesheet before your media query:

HTML

<div class="mn-nav" style=""><!-- Remove Inline Style Here -->
  <div class="col-md-12">
    <select width="100%" name="m-nav">
      <option value="select">Profile Menu</option>
      <option value="social">Social</option>
      <option value="profile">My Profile</option>
      <option value="media">My Media</option>
    </select>
  </div>
</div>

CSS

.mn-nav{
    display: none;
}

@media  screen and (max-width:480px) {
    .mn-nav {
        display:block;
    }
    .main-site-nav {
        display:none;
    }
}

Bootply

Answer №2

The reason for this issue is due to the fact that you have specified display: none; as an inline style.

Here is the HTML code:

<div class="mn-nav">
    <div class="col-md-12">
        <select width="100%" name="m-nav">
            <option value="select">Profile Menu</option>
            <option value="social">Social</option>
            <option value="profile">My Profile</option>
            <option value="media">My Media</option>
        </select>
    </div>
</div>

And here is the corresponding CSS code:

.mn-nav { 
    display: none;
}

@media  screen and (max-width:480px) {
    .mn-nav {
        display: block;
    }

    .main-site-nav {
        display: none;
    }
}

It's important to note that when there is a conflict between inline styles and external CSS, the inline styles take precedence. This is why the display: block property is not being applied in this case.

Answer №3

The issue here lies within the 

<div class="mn-nav" style="display:none;">
element, where the inline style takes precedence over a CSS stylesheet style.

To resolve this, simply relocate the styling to:

.mn-nav{
   display:none;
}

Once you make this adjustment, your problem will be solved.

For further information, visit: CSS which takes precedence, inline or the class?

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

Ensuring that a header one remains on a single line

Within this div, I have set the width and height to be 250px. Specifically, the h1 element inside the div has a height of 50px. Users who are updating content on my website can input any text they desire within this box. However, when the text within the ...

htmlcss

I aim to decrease the number of decimal places in the code provided below

When working on an HTML page, I encountered a challenge with the decimal numbers displaying more positions than desired - for instance: 13.16 instead of 13.167. Despite my attempts to rectify this using the code snippet below, it is still not functioning ...

javascripthtmlnode.jsangularjs

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

cssreactjsmaterial-ui

Looking for some guidance with Bootstrap column layouts

I'm in the process of creating an address field layout. My goal is to have the State and Country sections positioned on the right side of the city and postal code fields. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3 ...

cssbootstrap-4

Integration issues in RetinaJs and jChartFX collaboration

I am currently utilizing jChartFX for charting purposes on my website. I have included the following line of code to bring in the footer: <?php include $_SERVER["DOCUMENT_ROOT"].'/footer.php' ?> The footer contains a script reference like ...

htmlchartsjchartfx

A clever way to transfer data between HTML and Java classes

I have recently built a HTML form with multiple fields for adding new items to a list. Here is a snippet of the code: <form v-on:submit.prevent="addItem" class="mt-3"> <div class="container"> <div class="input-field"> <div ...

javahtml

Converting JSP email text into HTML format with Spring's formatting features

Currently, I am working on implementing an email service using Spring. Users have the ability to input the email subject and body in a form and send the email successfully. However, there is an issue where line breaks and tabs entered by the user are not b ...

javajqueryhtmlspringspring-mvc

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Eliminate the 'X' div that is absolutely positioned in Ace Editor, as it disrupts the Drag and Drop functionality

I am currently facing an issue with the HTML5 Drag and Drop API in relation to a div containing an Ace Editor. The problem seems to revolve around the ghost image that appears during dragging. Typically, when dragging an element, the ghost image stays dir ...

htmldrag-and-dropdraggableace-editor

Mobile phone carousel glitch

I am encountering an issue with the Bootstrap v4.0 Carousel that I can't seem to resolve. Despite searching online for similar problems, I have not been able to find a solution, which is quite perplexing. Whenever I load a page on an iPhone, the caro ...

javascriptjquerycssbootstrap-4carousel

Ways to showcase the outcome of a spin after each rotation

I am currently working on a spinning code snippet that allows users to spin and potentially win different amounts. The code includes functionality to prevent more than 3 spins, set random rotation values, and animate the spinning effect. However, I now wa ...

javascripthtmljquerycss

Styling Material UI height in select elements (React)

Currently, I am developing a react application that utilizes Material Dashboard. I am encountering an issue with the height of a Select (drop-down list) component. See image here On the right side of my app, there is a standard input field and I would li ...

javascriptcssreactjsmaterial-uifrontend

Adjust the font size to fit the size of the button when resizing a md-button

Currently utilizing md-button with text inside An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution If anyone has any suggestions on how to resolve this problem, please share. I have included screenshots ...

htmlcssangularjsangular-material

Stop unauthorized access to PHP files by utilizing AJAX

Is there a way to prevent direct access to a specific PHP file named prevented.php? My approach involves a main file called index.php, which generates and stores a token in a $_SESSION variable. Additionally, there is another file called def.php that is ac ...

javascriptphphtmlajax

What is the process for transforming conditional classes from clxs to cva format?

Looking for a way to convert the code snippet below into cva format... {items.map((item, index) => { const isActive = item.key === SOMETHING; return ( <div key={index} className={clsx( ...

cssreactjsnext.jstailwind-css

swapping between two lines within a div

i'm developing a new music app and I am in need of the following chord progression: Am F G Am Ab Gdim A# Hello these are just placeholder lyrics for demonstration purposes, hey hey hello which should look li ...

htmlcss

Seeking the total number of occurrences of an xpath expression with a specific condition in PHP

CSS - <div class="container"> <p>This is a paragraph</p> </div> JavaScript - console.log('Hello, World!'); function multiply(a, b) { return a * b; } document.getElementById("demo").innerHTML = multiply(5, 3); ...

phphtmlxmlxpath

Instructions for adding and deleting input text boxes on an ASP.NET master page

*I am currently facing an issue with adding and removing input textboxes for a CV form using ASP.NET in a master page. Whenever I click on the icon, it doesn't seem to work as intended. The idea is to have a textbox and an icon "+" to add more textbox ...

javascripthtmlcsswebforms

The border of the CSS Span element does not extend the full height

Looking to add a separator line to my star rating bar, but struggling to make the border-left go full height. Any ideas on what I might be missing? Check out the JSBIN link for reference: http://jsbin.com/fusor/1/edit ...

htmlcss