I found I can be unclear in these kind of questions, so I'll try my best explaining it in two formats:

1)
Currently I'm working on the responsiveness of my website and the usability of it.
Since my menu looks good on pc's, but not on mobile devices, I want to make use of a navigation bar, only visible on smartphones.
I found some help on W3Schools, but it won't let me have separate menu's for different resolutions.
How can I add a div on my html page, that isn't visible on pc screens or tablets, yet is visible on phones?

2)
This is what I'm looking for:
I'd like to have 2 menu's, one for pc/laptop or tablet screens only and the other only for smartphones.
I'd liketo use a navigation bar on the menu for smartphones (using a hamburger menu).
If I use the class for the nav-bar on the homepage, it shows it on every format, while if I use
display: none;
It won't show anywhere. How do I fix this?

I have searched for this question on stackoverflow (and other sites) and found a similar [question](https://stackoverflow.com/questions/41677077/remove-css-attribute-when-under-certain-resolution), though the solution in there hasn't worked for me so far. If the answers in there are actually fullfilling my question asked here, what am I doing wrong?

[Current code](http://jsfiddle.net/v2oqps5m/2/):

html:

```
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script type="text/javascript">
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
    } else {
    x.style.display = "block";
  }
}

```

CSS:

```
/*I won't put all css in here, as it would get a bit messy*/
* {
box-sizing: border-box;
}

.topnav {
  display: block;
}

@media only screen and (max-height: 768px){
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}

.topnav #myLinks {
display: none;
}

.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #4CAF50;
color: white;
}
}

```