How do I hide top navigation links on phone in landscape mode? Media Query?

[daveharr1s0n]

Hello professionals,

I'm sort of teaching myself responsive web design through w3schools online, using their css file and a sample template, using my phone to test, which has a screen resolution of 360x756 (portrait) and 756x360 (landscape).

What I'm trying to do is hide the top navbar (replace with the hamburger icon) in landscape mode, as the list is too long and slips below the business name on the left.

How do I do so using media queries? I've played around a bit but with no success.

Here's the page:  http://www.daveharrisonwebdesign.com/test.html

And this is what's included in the css:

@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:1100px}.w3-auto{max-width:1140px} /* changed to 1100px from 980px */
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:400px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}

...

Thanks for any assistance,

Dave

[B i r n o u]

on link to the appropriate w3 school CSS file is missing

you have

<link rel="stylesheet" href="test.css">

where you should have

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="test.css">

[daveharr1s0n]

Thanks, Birnau. But I actually just copied and pasted all of that into the "test" css so I could modify as needed. I'm just playing around with this as a temporary quick fix to a site that isn't yet responsive. I appreciate your response! 

[B i r n o u]

@daveharr1s0n the test (CSS) file that I had download from your web site, at the time to debug your problem, did not contain yet the w3 (CSS) code, that's why I had answered you to add the link to the w3 (CSS) file...

so , in fact, now you just added the w3 specific code (CSS) in within your own test file (CSS).

do we agree ?

[osgood_]

Exactly what Birnou has observed. You are missing the link to the w3.css style sheet.

You should then add the 'w3-hide-medium' class to your 'w3-right' <div> as below, shown in red:

<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#cottages" class="w3-bar-item w3-button"> Our Cottages</a>
<a href="#work" class="w3-bar-item w3-button"> Our Rates</a>
<a href="#pricing" class="w3-bar-item w3-button"> Area Attractions</a>
<a href="#contact" class="w3-bar-item w3-button"> Location</a>
</div>

Also remove the 'w3-hide-medium' class from the burger anchor class as you WANT the burger to show on medium screens, struck through below:

<a href="javascript&colon;void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>

Plus you need to remove 'w3-hide-medium' from your 'w3-sidebar.

<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">

See if that helps the situation.

Dont know about anyone elses opinion but I cant help thinking the W3 responsive css framework is NOT the way to go. If you MUST use a framework for responsive then a better bet would be to focus ALL your efforts on Bootstrap.

You are deploying a very poor method. There is ZERO need to have 2 seperate html blocks of navigation code for desktop and moblie - that means 2 places to manage and update and probably forget!

[Nancy OShea]

I agree with @osgood_ about the W3 layout system which BTW has no affiliation with the World Wide Web Consortium (W3C).  This "system" is an elementary approach to web design for kids who are just starting out.  As a learning aid it might be OK but I couldn't use it in production on a real site. It's not nearly robust enough.

[daveharr1s0n]

As always, thanks!

I already had the w3scools code copied and pasted in my sample.css so I could adjust as needed.

Also, I knew I could "hide-medium" but I wondered what that might do to tablets and phones larger than mine (in landscape mode) where the full list of links would show (I'll have to take a look when I get a chance). I thought maybe there was a solution in the media query. I'm still unsure what the best breakpoints are there.

Yes, I suspected the w3schools framework might not be the best, but after playing around with it a bit it seemed it would be a quick temporary fix to a site that isn't yet responsive that I want to (eventually) re-design entirely. I dabbled a bit in Bootstrap once. I'll definitely take a closer look. I recall being criticized on this very forum once for a site I created for a client because it wasn't responsive. I seem to recall this same critic coming down rather harshly on Bootstrap. So you're saying it's not a bad framework?

I am but a simple freelancer working a full time airline job fifty plus hours a week.  🙂  If only I could retire from that and devote more time to web design ...

Thanks, Osgood. I always appreciate the feedback!

Dave

[osgood_]

I seem to recall this same critic coming down rather harshly on Bootstrap. So you're saying it's not a bad framework?

By @daveharr1s0n

It's the lesser of 2 evils is how I like to look at it, rather than good/bad. If you can't, don't want to, don't have time, etc, to code your own responsive structure, which is undoubtedy, in my opinion, the best solution then the alternative is to use a responsive framework.

Bootstrap is most probably the best of the bunch of front end responsive frameworks and certainly the most popular. Would I use it, not if I can avoid it, would I recomend using it  - only if you fall into any of the critera which I mentioned.