Responsive Navigation

Hi, I am unable to find out where I am going wrong when it comes to my responsive navigation. Separately they both work great but when I put them together, I can’t get them to switch between desktop view to mobile view. I think my code is stopping the mobile icon from being displayed. If I change anything then the mobile view is visible in desktop mode.

Here is the css

.header { position: absolute; font-size: 35px; float: left; margin-top:0px; padding: 35px; top: 0; right:0; left:0; background: none; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.header a {text-decoration:none; color: #39C; align: center;} 
.beta {line-height: 45%; }
.betastyle {color: #000; font-size: 14px; margin-left: 18px;}

.nav {text-align:center; position: absolute; top: 0; right:0; left:0; padding: 35px; padding-top:4% }
.navstyle a {padding: 10px; text-decoration:none; color: #39C; font-weight: bold; font-size: 110%; }
a.navline:hover {border-bottom: 2px solid #39C; }
.sidenav .closebtn {display:none;}
.menu {display:none; }


/* iPhone 6,7,8 plus in portrait only */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {

.nav {display:none; }
.menu {float: right; margin-top: -75px; }

.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; 
	transition: 0.5s; padding-top: 60px;} 

.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } 

.sidenav a:hover { color: #f1f1f1; } 

.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } 

I simplified my navigation, here is the code and js.

<nav>

<div class="header">
<div class="beta">
<a class="#" href="index.php">company</a>
<p class="betastyle"><b>beta coming soon!</b></p>
</div>
 <div class="menu"> 
<span style="font-size:35px;cursor:pointer;" onclick="openNav()">&#9776;</span>
</div>
 </div>

<nav>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="nav">
<div class="navstyle">

  <a href="#">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
    
 </div>
   </div>

</nav>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

Any assistance would be appropriated. I have been playing with this for a little while now and just can’t figure out what to do to fix the issue.

Hi,

The first thing to do would be to run your html and css through the validators as you have a number of simple typos.:slight_smile:

You are turning things off in the desktop rules but not turning them back on again.

Don’t use device-width either as you are not interested in specific devices but on the available with for your display. You don’t know what width devices will be and you have excluded any devices below 414px anyway which rules out my iphone 5.

Just use max-width of min-width media queries and in that way you cater for all devices. Base the media queries on tyhe metrics of your design so that when your design no longer fits nicely at a certain width (whatever that may be) then you add a media query and change the design to work better. With a few well chosen media queries and a fluid design approach you cater for devices now and in the future without knowing anything about them. This approach also allows you to do most of the design in the desktop by adjusting the window size which is much quicker than switching between devices.

I’ve made a quick re-jig of your code to make things work (modern browsers support only) but I have left work for you to do :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
.header {
  position: relative;
  font-size: 2rem;
  padding: 35px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.header a {
  text-decoration: none;
  color: #39c;
}
.beta {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}
.betastyle {
  display: block;
  color: #000;
  font-size: 14px;
  margin-left: 5px;
}
.nav {
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 35px;
}
.navstyle {
  margin: 0;
  padding: 0;
  list-style: none;
}
.navstyle li {
  display: inline-block;
  vertical-align: middle;
}
.navstyle a {
  padding: 10px;
  display: block;
  text-decoration: none;
  color: #39c;
  font-weight: bold;
  font-size: 110%;
}
.navstyle a:hover {
  color: #000;
}
@media only screen and (min-width: 737px) {
  .closebtn,
  .menu,
  .closebtn.open,
  .menu.open {
    display: none;
  }
}

/* don't use device-width!!!  */
/* do it for all devices by just using max-width  (or min-width)*/
@media only screen and (max-width: 736px) {
  .sidenav {
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #111;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 60px;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  .sidenav.open {
    opacity: 1;
    transform: translateX(0);
  }
  .menu,
  .closebtn {
    position: absolute;
    right: 25px;
    top: 25px;
    display: block;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    font-size: 36px;
  }
  .closebtn {
    position: absolute;
    top: 5px;
    right: 10px;
    display: block;
    z-index: 2;
    color: #fff;
  }
  .nav {
    text-align: left;
    position: static;
    padding: 0;
  }
  .navstyle li {
    display: block;
  }
  .navstyle a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1.4rem;
    color: #818181;
    display: block;
  }
  .navstyle a:hover {
    color: #fff;
  }
}

</style>
</head>

<body>
<div class="header">
  <h1 class="beta"><a class="#" href="index.php">company</a> <b class="betastyle">beta coming soon!</b></h1>
  <button id="hamBurger" class="menu">&#9776;</button>
</div>
<div id="mySidenav" class="sidenav">
  <button id="closeBtn" class="closebtn">&times;</button>
  <nav class="nav">
    <ul class="navstyle">
      <li><a href="#">Home</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
</div>
<script>
(function(d) {
     'use strict';
     var sideNav = d.getElementById('mySidenav'),
         hamBurger = d.getElementById('hamBurger'),
         closeBtn = d.getElementById('closeBtn')

     hamBurger.addEventListener('click',
         function() {
             sideNav.classList.toggle('open');
         }, false);

     closeBtn.addEventListener('click',
         function() {
             sideNav.classList.remove('open');
         }, false);

}(document));
</script>
</body>
</html>

Don’t style elements from JS but rather add a class and let css handle the style changes. Avoid inline onclick handlers but move js to the js file where it belongs.

You have absolutely positioned your desktop menu which is ok for the small snippet you have posted but if your header bar is to be more complicated then you need to put the menu in the flow (flex box or similar) so that it takes up space properly in the document.

You had also absolutely placed the whole header which would be bad because you could never have any content in the page without also absolutely placing the content and then the page becomes to rigid and unmanageable. Use absolute positioning carefully and in controlled situations. Most of the time the document needs to flow logically from element to the next without positioning required.

Don’t forget the viewport meta tag ort mobiles won’t read the media queries anyway and all will be lost.

The above should get you on the right track but try to use semantic elements (like headings, p tags and buttons for actions etc). Don’t use inline styles even for demos.

1 Like

Thank you so much for taking the time to assist me.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.