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

CSS trying to change order of nth-child() div with media query – Html

i’m trying to create a centered navbar on a webpage. The navbar is made of 5 divs and i want the third div to become the first one when the screen gets below 600px

Here is my HTML

    <div class="mainmenu">
            <div class="nav">Skills</div>
            <div class="nav">Formation</div>
            <div class="nav titre">John Doe</div>
            <div class="nav">Project</div>
            <div class="nav cta">Call me</div>
    </div>

and my CSS

.mainmenu {
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;
    height: 60vh;
    text-align: center; 
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    font-size: 17px;


}

.nav {
    width: 10%;
    margin: 17px;
    font-size: 20px;
}

.mainmenu .titre{
    font-size: bolder;
    font-size: 30px;
}

.cta {
    border-radius: 15px;
    padding: 18px;
    white-space: nowrap;
}

@media screen and (max-width:768px) {

}
.mainmenu:nth-child(3){
    order: 1;
}

the John Doe instead of being first when under 768px is last all of the time and the media queries doesnt change anything on my vs code preview neither on chrome, i tried changing the max-width, i tried to reverse the mainmenu flex-direction but John Doe keeps being last.Kinda new here so any tips that could also help me ask better questions is welcome

Thanks for reading me

Tags:

3

Answers


  1. 0

    use order: -1; instead of order: 1;

    and replace .mainmenu:nth-child(3) with .mainmenu .nav:nth-child(3)

    .mainmenu .nav:nth-child(3){
    order: -1;
}

    Demo

    .mainmenu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 60vh;
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
}

.nav {
  width: 10%;
  margin: 17px;
  font-size: 20px;
}

.mainmenu .titre {
  font-size: bolder;
  font-size: 30px;
}

.cta {
  border-radius: 15px;
  padding: 18px;
  white-space: nowrap;
}

@media screen and (max-width:768px) {
  .mainmenu .nav:nth-child(3) {
    order: -1;
  }
}
    <div class="mainmenu">
  <div class="nav">Skills</div>
  <div class="nav">Formation</div>
  <div class="nav titre">John Doe</div>
  <div class="nav">Project</div>
  <div class="nav cta">Call me</div>
</div>
    Login or Signup to reply.
  2. 0

    to make the third div appear first on screens below 600px, you should use the order property in your media query like this….

    .mainmenu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
  }

  .titre {
    order: -1;
  }

  .nav {
    width: 100%;
    margin: 10px 0;
  }

    add this code inside your media query & try.

    Hope This Helps…..

    Login or Signup to reply.
  3. 0

    [Be careful of your braketing in media queries.]

    This snippet puts all nav items at order 2 when the viewport is narrower and then overrides this for the 3rd child of mainmenu (the 3rd child of main menu, not the mainmenu that is a 3rd child).

    .mainmenu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 60vh;
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
}

.nav {
  width: 10%;
  margin: 17px;
  font-size: 20px;
}

.mainmenu .titre {
  font-size: bolder;
  font-size: 30px;
}

.cta {
  border-radius: 15px;
  padding: 18px;
  white-space: nowrap;
}

@media screen and (max-width:768px) {
  .mainmenu .nav {
    order: 2;
  }
  .mainmenu .nav:nth-child(3) {
    order: 1;
  }
}
    <div class="mainmenu">
  <div class="nav">Skills</div>
  <div class="nav">Formation</div>
  <div class="nav titre">John Doe</div>
  <div class="nav">Project</div>
  <div class="nav cta">Call me</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search