How do I make my navbar responsive to a tablet?

responsive menu examples
hamburger menu css responsive
responsive navbar
responsive horizontal menu
responsive navbar with logo
responsive fixed navbar
navigation bar
responsive navbar with dropdown

So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly.

HTML

<html>
<head>

    <title>Project Layout - Original</title>

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="homecontent.css" type="text/css" />

<style>

</style>

</head>
<body>



<header>

    <div id="container">

    <nav id="nav">

        <ul>
            <img src="finesselogotag.png" id="titleimage"> </img>
            <li><a class="active" href="placeholder.html">Home</a></li>
            <li><a class="nav" href="placeholder.html">Products</a></li>
            <li><a class="nav" href="placeholder.html">Order now</a></li>
            <li><a class="nav" href="placeholder.html">Games</a></li>
            <li><a class="nav" href="placeholder.html">About us</a></li>
            <li><a class="nav" href="placeholder.html">Presentation</a></li>
        </ul>
    </nav>

    </div>

</header>



<div>
    <p>Test text</p>
</div>


<footer>

    <p class="copyright">&copy;Copyright by DLSZ</p>
</footer>

</div>

</body>
</html>

CSS

    /*to remove default margins*/

* {
margin: 0;
list-style-type: none;
background-color: #e0dbd1
}
/*to remove default margins*/

header, nav, section, article, footer {
  display: block;
}

/*Css for the whole div*/
#container {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    background-color: #1f242e;
    height:49.5px;
    float: left;
}

.logo {
height: 100px;
width: 200px;
float: left;
}


/*CSS for the whole div*/

/*Menu Bar*/

#nav {
float:left;
height: 50px;
text-align: center;
}

#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}

#nav li {
float: left;
display: block;
height: 19.5px;

}

#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}

#nav li a {
    float: left;
        display: block;
        padding: 15px;
        background-color: #1f242e;
        text-align: center;
        font-style: verdana;

}

#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}

#titleimage {
position: absolute;
top: -1.95%;
right: 0%;
float: left;
width: 150px;
height: 79.5px;
}

/*Menu Bar*/


section {
height: auto;
width: 1000px;
}

footer {
text-align:center;
height: 40px;
}

footer ul li{
    display: inline-block;
    }

footer ul li a {
    color: 000000;
}

.content {
    display: inline-block;
    padding: 2px;
    margin-left: 50px;
    margin-bottom: 15px;
    margin-top: 25px;
    border: 2px solid black;
    width: 900px;
}

.left {
    float: left;
    margin-right: 5px;
}

.right {
    float: right;
    margin-left: 5px;
}

/*FONTS*/

@font-face {
    font-family: SFAtarian;
    src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/

Here's what it looks like normally:

And here's what it looks like on an iPad:

Like I said, I'm kind of new to this kinda thing. Any advice on how to do this would be greatly appreciated, thanks!


<head> 
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

use this tag in section,it will work. use of viewport : The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Building a responsive top navigation menu with HTML and CSS , We will walk you through a specific implementation of the navbar, and you can Tablet views can still make use of a single-column layout. If you are new to web design and the concept of “responsive” design seems foreign to you, basically it refers to your designs ability to “flow” as you resize the screen or move to a device with a smaller width. Responsive design is built to work on both big and small screens, and this includes the navigation or menu bar visitors use to access other pages of your site.


Try any of these.. Bootstrap navigation: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

W3.css navigation: https://www.w3schools.com/w3css/w3css_navigation.asp

How to create a responsive Navigation Bar with HTML, CSS and , A navigation bar is one of the main components of a website, in my opinion build a simple navigation bar and we will see how to make it responsive. This layout is fine if you are using a computer or tablet, but here is what  Tip: To create a responsive navigation bar, that works on all devices, read our How To - Responsive Top Navigation tutorial. Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.


Check this please, here is the responsive view for your code

https://codepen.io/atulraj89/pen/QJVPJv

Make your HTML Navigation Bar Responsive, Learn how to create a mobile first drop down navigation menu in CSS and HTML. I have a problem with this bar: you cannot simply change the { position } of the nav element to fixed (so it will always appear on the top, like your red top navigation bar). That got me thinking. Not only was it time to rewrite my most popular tutorial, but it was time to pump it full of steroids to become a kick-ass navigation menu.


$('.hamberger').click(function() {
		$('.hamberger-nav-bar').toggleClass('active-left');
});
    /*to remove default margins*/

* {
  margin: 0;
  list-style-type: none;
}

/*to remove default margins*/

header, nav, section, article, footer {
  display: block;
}

/*Css for the whole div*/

#container {
  list-style: none;
  font-weight: bold;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  background-color: #1f242e;
  height:49.5px;
  float: left;
}
.logo {
  height: 100px;
  width: 200px;
  float: left;
}


/*CSS for the whole div*/

/*Menu Bar*/

#nav {
  position: relative;
  float:left;
  height: 50px;
  text-align: center;
  margin-top: 50px;
}
#nav ul {
  float: left;
  margin: 0px;
  padding: 0px;
  overflow: visible;
}
#nav li {
  float: left;
  display: block;
  height: 19.5px;
}
#nav a {
  float: left;
  text-decoration: none;
  color: #e0dbd1;
  font-family: verdana;
}
#nav li a {
  float: left;
  display: block;
  padding: 15px;
  background-color: #1f242e;
  text-align: center;
  font-style: verdana;
}

#titlenav {
  float: left;
  background-color: #1f242e;
  display: block;
  font-family: SFAtarian;
  padding: 15px;
  font-size: 40px;
  height: 19.5px;
  color: #e0dbd1;
  position: absolute;
  top: -1.5%;
  right: 0%;
}

#titleimage {
  position: absolute;
  top: -1.95%;
  right: 0;
  float: left;
  width: 150px;
  height: 79.5px;
}

/*Menu Bar*/


section {
  height: auto;
  width: 1000px;
}

footer {
  text-align:center;
  height: 40px;
}

footer ul li{
  display: inline-block;
    }

footer ul li a {
  color: 000000;
}

.content {
  display: inline-block;
  padding: 2px;
  margin-left: 50px;
  margin-bottom: 15px;
  margin-top: 25px;
  border: 2px solid black;
  width: 900px;
}

.left {
  float: left;
  margin-right: 5px;
}

.right {
  float: right;
  margin-left: 5px;
}
.hamberger {
  display: none;
}

/*FONTS*/

@font-face {
  font-family: SFAtarian;
  src: url(SFAtarian.ttf);
}

/*END OF FONT LIST*/

/* HAMBERGER CSS */

.hamberger {
  position: absolute;
  top: 30px;
  right: 15px;
  z-index: 999999;
  padding: 10px 35px 16px 0;
  cursor: pointer
}

.hamberger span,
.hamberger span:before,
.hamberger span:after {
  content: "";
  position: absolute;
  display: block;
  width: 35px;
  height: 3px;
  border-radius: 1px;
  border-color:#ffffff;
  background: #ffffff;
  cursor: pointer;
}

.hamberger span:before {
  top: -10px;
}

.hamberger span:after {
  bottom: -10px;
}

.hamberger span,
.hamberger span:before,
.hamberger span:after {
  transition: all 300ms ease-in-out;
}

.hamberger.active span {
  background-color: transparent
}

.hamberger.active span:before,
.hamberger.active span:after {
  top: 0;
}

.hamberger.active span:before {
  transform: rotate(45deg);
}

.hamberger.active span:after {
  top: 10px;
  transform: translatey(-10px)   rotate(-45deg);
}

/* MEDIA QUERY */

@media (max-width: 991px){
  .hamberger-nav-bar {
    position: fixed;
    left: -300px;
    width: 300px;
    transition: all 0.5s;
  }
  .hamberger-nav-bar.active-left {
    left: 0;
    position: relative;
  }
  .hamberger-nav-bar.active-left:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
  }

  #nav {
    float: none;
    height: auto;
    position: relative;
    z-index: 99;
  }
  #nav ul {
    width: 100%;
    float: none;
  }
  #nav li {
    float: none;
    height: auto;
    width: 100%;
  }
  #nav li a {
    float: none;
  }
  #titleimage {
   top: 0;
  }
  .hamberger {
    float: left;
    margin: 17px 0 0 10px;
    position: fixed;
    top: 0;
    left: 20px;
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homecontent.css" type="text/css" />
</head>
<body>
<header>
    <div id="container">
      <div class="hamberger">
        <span></span>
      </div>
    <nav id="nav" class="hamberger-nav-bar">
        <ul>
            <li><a class="active" href="placeholder.html">Home</a></li>
            <li><a class="nav" href="placeholder.html">Products</a></li>
            <li><a class="nav" href="placeholder.html">Order now</a></li>
            <li><a class="nav" href="placeholder.html">Games</a></li>
            <li><a class="nav" href="placeholder.html">About us</a></li>
            <li><a class="nav" href="placeholder.html">Presentation</a></li>
        </ul>
    </nav>
      <img src="finesselogotag.png" id="titleimage">
    </div>
</header>
<div>
    <p>Test text</p>
</div>
<footer>
    <p class="copyright">&copy;Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>

How To Create a Mobile Navigation Menu, Learn how to create a top navigation menu for smartphones / tablets with CSS Load an icon library to show a hamburger menu (bars) on small screens --> Tip​: To create a responsive navigation bar, that works on all devices, read our How  So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly.


How to Build a Responsive Navigation Bar With Flexbox, Then, we will add the tablet- and desktop-specific CSS using min-width media queries. The navigation bar will also have a JavaScript-based  The touch zones of the menu should be bigger and easier to select in mobile devices. The solution is adding viewport meta tag in the HEAD section of your responsive page. It will tell mobile devices to render the page at the correct pixel resolution without zooming out page content.


Change the Bootstrap NavBar Breakpoint (Example), Frequently I see cases where the navbar collapse into it's mobile state and provides classes to make changing the navbar breakpoint easier. In this article, I’ll show you how to easily make a website responsive in three easy steps. 1 – The layout When building a responsive website, or making responsive an existing site, the first


Adding custom navigation menu on mobile and tablet version of the , I have a question with regards to responsive web design and I have started coding the navigation bar for this page, and got to the point where  Alright, so here is a simple way of making a responsive navbar using basically just CSS Grid. I'll be trying to explain everything as detailed, easy to read, and concise as possible, and if you're new to this, I suggest you pay extra attention to how and why everything is done.