Why won't my flexbox navbar align correctly?-CodePudding

Essentially I want the menu to display as it is (column), but underneath the navigation bar rather than positioning itself between the logo/hamburger.

The issue as far as I am aware is that the menu when within the media query breakpoint is still within the initial flexbox container it was prior to media query. I also am yet to style the navigation bar fully so the empty classes won't be empty forever.

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

body {
  background: #ffffff;
  font-family: 'Quicksand', sans-serif;
}

.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
}

nav {
  width: 100%;
  height: 100px;
  background: silver;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}

.logo {
  font-family: '01 Digitall';
  font-size: 40px;
  text-transform: uppercase;
  display: flex;
  height: 100%;
  align-items: center;
}

.logo .black {
  color: #000000;
}

.logo .red {
  color: #ff0000;
}

.nav-menu {
  display: flex;
  height: 100%;
  align-items: center;
  display: none;
}

nav ul {
  display: flex;
  height: 100%;
  align-items: center;
}

nav li {}

nav a {
  color: #000000;
}

@media (max-width: 768px) {
  nav {}
  .logo {}
  .nav-menu {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    position: absolute;
    width: 100%;
  }
  nav li {}
  nav a {
    color: red;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
  <div >
    <div >
      <span >Test</span>
      <span >Website</span>
    </div>


    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <div >
      <i ></i>
    </div>
  </div>
</nav>

I decided to lead with mobile-first, still learning and getting to grips with flex box.

CodePudding user response：

Your issue is mostly with the fundamentals of absolute positioning. Such elements are positioned with respect to the nearest non-static ancestor, so I've put relative position on the parent. Then, 100% width is problematic if you want to align the menu under the button. I've also set the right value to zero to get it over to the side.

I'm guessing at what you want to some extent. Please provide more detail if I'm off the mark.

Scroll the CSS panel down to see change markers.

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

body {
  background: #ffffff;
  font-family: 'Quicksand', sans-serif;
}

.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
}

nav {
  width: 100%;
  height: 100px;
  background: silver;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}

.logo {
  font-family: '01 Digitall';
  font-size: 40px;
  text-transform: uppercase;
  display: flex;
  height: 100%;
  align-items: center;
}

.logo .black {
  color: #000000;
}

.logo .red {
  color: #ff0000;
}

.nav-menu {
  display: flex;
  height: 100%;
  align-items: center;
  display: none;
}

nav ul {
  display: flex;
  height: 100%;
  align-items: center;
}

nav li {}

nav a {
  color: #000000;
}

@media (max-width: 768px) {
  nav {
    position: relative; /* <------------------------- HERE */
  }
  .logo {}
  .nav-menu {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    position: absolute;
    right: 0; /* <------------------------- HERE */
    /* width: 100%; */ /* <------------------------- HERE */
    top: 100%; /* <------------------------- HERE */
  }
  nav li {}
  nav a {
    color: red;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
  <div >
    <div >
      <span >Test</span>
      <span >Website</span>
    </div>


    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <div >
      <i ></i>
    </div>
  </div>
</nav>

CodePudding user response：

When you set position: absolute, the element will stay in the same position it would have been if it hasn't been positioned. In this case, if it wasn't for that property, the menu would have been between the logo and the hamburger item, since they're all inside a flex container.

When you use absolute positioning, you usually want to set top, left or similar properties to adjust its position.

In your situation, one quick way to put it below the header would be to:

Set the container (".container") to position: relative. This way, when we're refering "100%" in the next rule, we'll be considering the size of the container and not the whole document.
Add to the the menu (".container > ul") the following properties:

top: 100%;
left: 0px;

This will position the menu right below the header.

CodePudding user response：

Try it using JS.

css:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/01-digitall');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

body {
    background: #ffffff;
    font-family: 'Quicksand', sans-serif;
}


.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0;
}

nav {
    width: 100%;
    height: 100px;
    background: silver;
}

nav .container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding: 10px;
}

.logo {
    font-family: '01 Digitall';
    font-size: 40px;
    text-transform: uppercase;
    display: flex;
    height: 100%;
    align-items: center;
}

.logo .black {
    color: #000000;
}

.logo .red {
    color: #ff0000;
}

.nav-menu {
    height: 100%;
    align-items: center;
    display: none;
}

nav ul {
    display: inline-flex;
    height: 100%;
    align-items: center;
}

nav a {
    color: #000000;
}

@media (max-width: 768px) {
    nav {}
    .logo {}
    .nav-menu {
    display: flex;
    }
    nav ul {
        flex-direction: column;
        position: relative;
        width: 100%;
        display: none;
        top: 100px;
        right: 15%
    }
    nav li {}
    nav a {
        color: red;
    }
}

js:

const links = document.querySelector("nav ul")
const navMenu = document.querySelector(".nav-menu")

if (window.matchMedia("(max-width: 768px)").matches) {

}

let linksOpen = false
console.log("Start: links is closed")

navMenu.addEventListener("click", () => {
    if (linksOpen === false) {
        links.style.display = "inline-flex"
        linksOpen = true
        console.log("links is open")
    } else {
        links.style.display = "none"
        linksOpen = false
        console.log("links is closed")
    }
})