Question 44985 in Html Question posted in
Some basic documentation can be found here.

How to put my navbar heading above the other elements – Html

I’ve created this simple navbar using html and css, but I want to move "Valhalla" text on top of the other list elements when the screen gets smaller than 850px.

Html:

<nav>
  <ul>
    <li><a href = "#">
      <h1>
        <span><i class="fa-solid fa-dumbbell"></i></span>
        <span>Valhalla</span>
        
        </a>
      </h1>
      </li>
    <li><a href = "#">The Gym</a></li>
    <li><a href = "#">Workouts</a></li>
    <li><a href = "#">Coaches</a></li>
    <li><a href = "#">Supplements</a></li>
  </ul>
</nav>

Css:

 nav {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 1rem;
  background-color: black;
  }
nav a {
  text-decoration: none;
  color: var(--white);
}
nav a:hover{
  color: var(--green);
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-flow: row-wrap;
  align-items: center;
  gap: 1.5rem;
  
}
nav li:first-child {
  margin-right:auto;
}
.menu-btn {
  display: none;
}

@media (max-width: 850px){
}

I’ve tried moving it using max-width and flex-basis: 100% so it would take up the space above, but it kinda just moved to the center of the left side of the navbar, not above the other elements of the list.

@media (max-width: 850px){
  nav{
  max-width: 1200px;
  margin: 0 auto;
  }
  nav li:first-child {
  text-align: center;
  flex-basis: 100%;
}
Tags:

2

Answers


  1. 0

    You can add flex-wrap to nav ul

    @media (max-width: 850px){
  nav{
  max-width: 1200px;
  margin: 0 auto;
  }
  nav ul{
    flex-wrap: wrap;
  }
  nav li:first-child {
  text-align: center;
  flex-basis: 100%;
  }
}

    or change flex-flow: row-wrap; to flex-flow: row wrap;

    flex-flow =
    <‘flex-direction’> ||
    <‘flex-wrap’>

    more info about flex-flow

    Login or Signup to reply.
  2. 0

    If I got you correctly then all you need to do is add an id to the element tag that you want it to be on top of the others:

    <nav>
  <ul>
    <li><a href = "#">
      <h1>
        <span><i class="fa-solid fa-dumbbell"></i></span>
        <span id="name">Valhalla</span>
        
        </a>
      </h1>
      </li>
    <li><a href = "#">The Gym</a></li>
    <li><a href = "#">Workouts</a></li>
    <li><a href = "#">Coaches</a></li>
    <li><a href = "#">Supplements</a></li>
  </ul>
</nav>

    and then you can use the ‘z-index’ and set it to 1 in css:

    #name {
    z-index: 1;
}

    This should work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search