how to make a responsive navigation on the top-CodePudding

I want to make a responsive navigation on my website. i didn't use a grid I tried

@media screen and (max-width: 600px) {
.menu{
    height: 100%;
    width: 15px;
    float: top;

}}

but that don't work I want it to get on the top of my website

CodePudding user response：

There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc.

try below one,

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a  href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

References: 1.https://www.w3schools.com/css/css_navbar.asp 2.https://getbootstrap.com/docs/5.0/components/navbar/

Note: float:top is not working

CodePudding user response：

So some suggestions: Send the html code or jsut some of it. You can also try adding margin: 0; to the body:

body{
 margin: 0;
}

You will also need to add a background - color:

.menu {
 background-color: red;
}

And more stuff could be added but you can check this: https://www.w3schools.com/howto/howto_css_style_header.asp This helps a lot

CodePudding user response：

You can use this codepen which I had made yesterday or may be before that, I don't remember :-

https://codepen.io/CodingPencil/pen/abEWzXp

Or just copy my code here :-

HTML -

 <nav>
  <div>
    <a href="#" >Something</a>
  </div>
  <div>
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div  id="menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

CSS -

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --nav-bg: #03000e;
  --main-clr: dodgerblue;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  background: #03000e;
}

nav .logo {
  color: #fff;
  text-decoration-color: var(--main-clr);
  font-size: 22px;
  font-family: "Playfair Display", serif;
  font-weight: 100;
}

nav ul {
  --padding: 20px;
  --font-size: 17px;

  list-style: none;
  display: flex;
  align-items: center;
  font-size: var(--font-size);
  overflow-y: hidden;
  transition: 1s ease;
}

nav ul li {
  padding: var(--padding);
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  position: relative;
}

nav ul li a::after {
  content: "";
  width: 0%;
  height: 2.5px;
  border-radius: 99px;
  background: var(--main-clr);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.3s ease;
}

nav ul li a:hover::after {
  width: 100%;
}

nav .menu {
  width: 22px;
  height: 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin: 20px;
}

nav .menu span {
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: #fff;
  transition: 0.3s ease;
  transform-origin: left;
}

nav .menu.active span {
  background: var(--main-clr);
}

nav .menu.active span:nth-child(1) {
  transform: rotate(40deg);
}

nav .menu span:nth-child(3) {
  transform-origin: left;
}

nav .menu.active span:nth-child(3) {
  transform: rotate(-40deg);
}

nav .menu.active span:nth-child(2) {
  transform: scale(0);
}

@media (max-width: 910px) {
  nav .menu {
    display: flex;
  }

  nav ul {
    --height: 0px;

    flex-direction: column;
    background: var(--nav-bg);
    position: absolute;
    width: 100%;
    left: 0;
    top: 56px;
    height: var(--height);
    transition: 1s ease;
  }

  nav ul.active {
    --height: calc(
      (((var(--padding) * 2)   (var(--font-size) * 1.5))) * var(--childenNumber)
    );
    transition: 1s ease;
  }

  nav ul li {
    width: 100%;
    text-align: center;
  }
  nav ul li a {
    width: 100%;
    text-transform: capitalize;
  }
}

And the JAVASCRIPT -

const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");

menu.addEventListener("click", () => {
  navigation.style.setProperty("--childenNumber", navigation.children.length);

  navigation.classList.toggle("active");
  menu.classList.toggle("active");
});