Show desktop navbar in desktop view and show a mobile navbar in mobile view-CodePudding

I would like to display my navbar that I made for desktop view only when viewing on desktop screens, and show my navbar I made for mobile screens.

I can get it working so only Desktop navbar version shows on desktop, But its a blank space on mobile view.

Here is my current code:

HTML

<header >{% include 'navbar.html' %}</header>
<header >{% include 'navbardesktop.html' %}</header>

CSS

@media only screen and (max-width: 800px) {
  .desktop-nav {
    display: none!important;
  }
  .mobile-nav {
    display: block;
  } 
}
.mobile-nav {
  display:none!important;
}

CodePudding user response：

You are bumpingup against the concept of cascade in CSS.

The @media rule does not introduce any extra weight to the selectivity so initially the system sees to set the element as display: block but then is finds a request to set it to display: none.

So, change the order of the declarations:

.mobile-nav {
  display:none!important;
}
@media only screen and (max-width: 800px) {
  .desktop-nav {
    display: none!important;
  }
  .mobile-nav {
    display: block;
  } 
}

Incidentally, you should be able to remove the !important,though that may depend on any other styling you have.