Absolute positioning of navbar

Question

Here I have a responsive navbar which I want to be absolute and menu items to float right but when I apply position property to it, menu items floats to left. Also applying absolute position to nav makes hamburger for small screen float left and when it opens the closing icon disappears.

Please help me figure out the right solution to make nav absolute but not affect the menu items and hamburger

Note: While checking code snippet try it for both desktop and mobile screen

    document.getElementById("hamburger").addEventListener("click", function() {
      this.classList.toggle("active");
      document.querySelector(".mobile-menu").classList.toggle("active");
    });

body {
  background-color: rgb(0, 0, 0);
  margin: 0;
  overflow-x: hidden;
  cursor: pointer;
}

img {
  margin-top: 100px;
}

@media (max-width: 767px) {
  img {
    margin-top: 40px;
    height: 80px;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}


/* Navigation Menu */

nav {
  height: 70px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

nav #menu {
  display: flex;
  height: 100%;
}

nav #menu li {
  padding: 0px 30px;
  line-height: 70px;
  transition: all 0.3s ease-out;
}

nav #menu li a {
  color: #fff;
}

nav #menu li a:hover {
  color: rgb(238, 215, 12);
}

@media (max-width: 767px) {
  nav #menu {
    display: none;
  }
}


/* Mobile Menu */

#hamburger {
  position: absolute;
  float: right;
  right: 10px;
  top: 14px;
  z-index: 999;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
}

#hamburger .line {
  height: 5px;
  background: rgb(238, 215, 12);
  margin: 5px auto;
  backface-visibility: hidden;
}

#hamburger.active #one {
  transform: rotate(45deg) translateX(6px) translateY(6px);
}

#hamburger.active #two {
  opacity: 0;
}

#hamburger.active #three {
  transform: rotate(-45deg) translateX(10px) translateY(-12px);
}

@media (max-width: 767px) {
  #hamburger {
    visibility: visible;
    opacity: 1;
  }
}

.mobile-menu {
  z-index: 1;
  position: absolute;
  top: 0px;
  background: black;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
  display: table;
}

.mobile-menu .mobile-menu__items {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}

.mobile-menu .mobile-menu__items li {
  display: block;
  text-align: center;
  padding: 20px 0;
  text-align: center;
  font-size: 35px;
  min-height: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.mobile-menu .mobile-menu__items li:hover {
  color: rgb(238, 215, 12);
}

.mobile-menu .mobile-menu__items li:hover a {
  transition: all 0.3s ease-out;
  color: rgb(238, 215, 12);
}

.mobile-menu .mobile-menu__items li a {
  color: white;
}

.mobile-menu.active {
  visibility: visible;
  opacity: 0.99;
}

@media (min-width: 768px) {
  .mobile-menu {
    visibility: hidden !important;
  }
}


/* Main */

h1 {
  z-index: 1;
  color: #fff;
  left: 0;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About</title>
  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <!-- Navigation Menu -->
  <header>
    <nav>
      <a href="home"><img src="images/logo.svg" alt="logo"></a>
      <ul id="menu">
        <li><a href="home">HOME</a></li>
        <li><a href="work">WORK</a></li>
        <li><a href="about">ABOUT</a></li>
        <li><a href="javascript:;">CONTACT</a></li>
      </ul>

      <div id="hamburger">
        <div class="line" id="one"></div>
        <div class="line" id="two"></div>
        <div class="line" id="three"></div>
      </div>
    </nav>
    <!-- Mobile Menu -->
    <div class="mobile-menu">
      <ul class="mobile-menu__items">
        <li><a href="home">HOME</a></li>
        <li><a href="work">WORK</a></li>
        <li><a href="about">ABOUT</a></li>
        <li><a href="javascript:;">CONTACT</a></li>
      </ul>
    </div>
  </header>
  <!-- Main -->
  <main>

    <h1>hello</h1>
  </main>


</body>

</html>

S.nazari · Answer 1 · 2020-06-08T18:14:18.787

0

add this style to your css change menu ul li a

 nav ul li a{display:block;width:100%;float:right;text-align:right;}

edited Jun 08 '20 at 18:14

answered Jun 08 '20 at 16:24

S.nazari

19
4

Check here I tried what you suggested https://jsfiddle.net/j20csk6v/1/ – Ashish Sood Jun 08 '20 at 16:32
What @S.nazari means is that you should not declare the "position" and "float" properties on the same selector. I.E., use one or the other, but not both. – charles Jun 08 '20 at 17:49
yeah. when you declare the "position" to absolute then float dont work – S.nazari Jun 08 '20 at 18:22

Absolute positioning of navbar

1 Answers1