Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px.

Here is the HTML code:

<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 here is the CSS code:

.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;
    }
}

Despite adjusting the max-width in media queries and trying different approaches, such as reversing the mainmenu flex-direction, I cannot get 'John Doe' to be displayed at the top when the screen size is under 768px. Any advice or suggestions on improving my question-asking skills would be greatly appreciated. Thank you for taking the time to read this.

htmlcss

Answer №1

try using order: -1; in place of order: 1;

also, update .mainmenu:nth-child(3) to .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>

Answer №2

If you want the third div to show up first on screens that are smaller than 600px, you can achieve this by using the order property in your media query. Here's how you can do it:

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

  .titre {
    order: -1;
  }

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

Simply insert this code into your media query and give it a try.

I hope this solution proves to be helpful for you.

Answer №3

[Make sure to properly adjust your media query brackets.]

This code snippet reorders navigation items within a main menu based on the viewport width. It sets all nav items to order 2 when the viewport is narrower, but overrides this for the 3rd child of the main menu specifically.

.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-weight: bold;
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment issue arises when the browser is resized

Something seems off with my images. They appear correctly when I first open the browser, but if I resize it, they go all wonky. Refreshing the page fixes it, but if I open a larger browser window and then make it smaller, it messes up again. It's puzz ...

htmlcssimageresponsive-designresize

Struggling with IE7 compatibility issues regarding tables inside a div? Seeking a reliable resource to gain insights and strategies for effectively resolving IE7 problems

I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the im ...

htmlcssinternet-explorer-7

PHP code exhibiting inconsistent behavior when executed on a WAMP Server

My WAMP Server is set up and running smoothly as I dive into PHP code for a class assignment. The server icon shines bright green, my HTML and PHP files in the www folder are functioning perfectly. I am currently using PHP v7.0.1 on my WAMP setup. However ...

phphtmlwampexecution

Use Angular2 to showcase the selected image as the main one when the user clicks on the

I'm working on creating a product thumbnail gallery, and I'd like the main image to be displayed when the user clicks on a thumbnail. I am using Angular for this project, although I am still learning my way around the framework. product.html &l ...

javascripthtmlangulartypescript

Utilize JavaScript to send login information to a website

I have a specific task in mind: creating a script that will automatically fill in certain data on an HTML website. To illustrate, let's imagine the site is the StackOverflow login page and I want to input my username and password. For the username fi ...

javascriptjqueryhtmlajax

What is the best way to implement Infinite scroll alongside Virtual scroll in Ionic 3?

Having recently delved into the world of Ionic and Angular, I am encountering some difficulties with implementing Infinite scroll alongside Virtual scroll. Despite pushing data such as images, text, and click functions from TypeScript, only empty Ionic car ...

htmlangulartypescriptionic-frameworkionic3

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

What steps can I take to prevent the array from constantly updating and instead only show the final task?

<h1>Custom Calendar and Task Scheduler</h1> <div class="navigation-text">Use the arrows to switch between months</div> <div class="navigation-text">Click on a date to create tasks</div> &l ...

phphtmlarrays

In responsive design, the sidebar may be positioned either above or below the content, depending

Managing the placement of a sidebar in a responsive design can be tricky, especially when the sidebar content is crucial on some pages but not on others. One solution may involve switching the order of div elements in the HTML code, but this approach might ...

htmlcssresponsive-design

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

I have a certain form with input fields. My goal is to generate a JSON object from the form, excluding any input whose name is "point". However, my code doesn't seem to be working properly when I use the "not()" function. What am I doing wrong and how ...

javascriptjqueryhtml

Developing a slideshow with PHP and JQuery

Attempting to create a simple manual slideshow where the user clicks "next" to advance to the next slide. I have over 50 images and want to display them in batches of 8. For example, the first batch of 8 will be shown initially, then the user can click "ne ...

javascriptphpjqueryhtml

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

javascripthtmlfirebasenext.jsnext-auth

What is the solution to determining the width in AngularJS without taking the scrollbar size into account

How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...

javascripthtmlcssangularjs

Achieving the perfect button using a combination of material-ui and styled-components

Utilizing the ToggleButton and ToggleButtonGroup components from material-ui, starting with material-ui's gatsby template. To prevent common material-ui errors with production builds, I am attempting to incorporate styled-components as well. The foll ...

cssreactjsmaterial-uigatsbystyled-components

Creating a custom HTML layout: A step-by-step guide

Struggling to create a unique layout in HTML and seeking assistance. Instead of words, I'll show you my current layout with images: While this works fine for now, if div1 becomes taller, the layout will look like this: My ultimate goal is to achiev ...

csslayouthtml

Display current weather conditions with the Open Weather API (featuring weather icons)

Hello everyone, I need some help from the community. I am currently working on a weather app using the openweather API. However, I'm facing an issue with displaying the weather conditions icon for each city. I have stored every icon id in a new array ...

javascripthtmlapivue.jsweather

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

javascripthtml

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Is there a way to change certain attributes of a shape onscreen when a specific key is pressed by the user? For example, can I make it so that pressing "a" changes the color of the shape? I attempted to modify a mouse rollover event to work with the desir ...

javascripthtmlcss

What is the best way to position the top line next to the border?

I've been attempting to create a falling line effect on the left side of the box's border, but I can't seem to figure out what's causing the issue. Below is the code snippet: @import url('https://fonts.googleapis.com/css ...

htmlcss