CSS Grid hiding text on mobile (mobile first) - html

Question

I am building a navigation bar and using CSS grid.
Here is the html:
<nav class="nav">
<div class="menu">
<div class="header">
HEADER
</div>
</div>
<span class="space"></span>
<div class="breadcrumb">
<div class="bcrumb">
Breadcrumbs
</div>
</div>
</nav>
<div class="content">
</div>
And here is my CSS:
body {
font-family: sans-serif;
margin:0;
}
.nav {
height: 100px;
position: fixed;
right: 0;
left: 0;
top: 0;
display:grid;
grid-template-rows: 1fr 5px 1fr;
grid-template-areas:
"Menu"
"Space"
"Breadcrumb"
}
.content{
height:1000px;
background-color:gray;
margin-top:100px;
}
.menu {
grid-area: Menu;
background-color: #333333;
display: grid;
grid-template-columns: 1.5em 80px 1fr auto;
grid-template-areas: ". . . MenuItems";
}
.menu-items {
grid-area: MenuItems;
}
.space {
grid-area: Space;
background-color: #c20418;
}
.breadcrumb {
grid-area: Breadcrumb;
background-color: white;
}
#media only screen and (min-width : 1224px) {
.menu {
display:inline-grid;
grid-template-columns: 1.5em 80px auto 1fr auto auto;
grid-template-areas: ". . Header . . MenuItems";
align-content: end;
}
.header {
grid-area: Header;
color: white;
font-size: 1.2em;
}
.breadcrumb {
display: grid;
grid-template-columns: 1.5em 80px 1fr;
grid-template-areas: ". . Bcrumb";
}
.bcrumb {
grid-area: Bcrumb;
align-self: center;
font-size: 1.2em;
}
}
I have made it with an header text and text place for breadcrumbs that should only be there when on larger screens.
I've made it work by adding:
.header, .bcrumb{
visibility:hidden;
}
and then set it to visible in the media queries.
But surely there must be a better way to do this?
Here is a Fiddle with the same code.

Answer 1

Here is the CSS for mobile screens
#media all and (max-width: 767px) {
.header, .bcrumb {
visibility: hidden;
}
}