HTML unique flex wrapping

https://i.sstatic.net/ekVr4.png

#menu {
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 0 5px 0 5px;
height: 30px;
flex-wrap: wrap;
}

.menu_item {
margin: 0 10px 0 10px;
}

.menu_item2 {
margin: 0 10px 0 10px;
}
<div id="menu">
<div class="menu_item"><a href="band.html">Band</a></div>
<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/facebook.png"></a></div>
<div class="menu_item"><a href="band.html">Photos</a></div>
<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/instagram.png"></a></div>
<div class="menu_item"><a href="band.html">Video</a></div>
<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/vk.png"></a></div>
<div class="menu_item"><a href="band.html">Merch</a></div>
<div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/youtube.png"></a></div>
<div class="menu_item"><a href="band.html">Contacts</a></div>
</div>

Is there a way to move every second element in the flex container to the next row while maintaining their order? I have a horizontal menu with 9 buttons. The 2nd, 4th, 6th, and 8th elements are symbols of social networks, while the 1st, 3rd, 5th, 7th, and 9th are site links. How can I ensure that they appear on separate lines when the screen width is less than xxx pixels? I attempted using "@media" queries, but adjusting margins for each element individually seems inefficient. Is there a more effective method to achieve this layout? Your assistance would be greatly appreciated.

htmlcssflexbox

Answer №1

It's my understanding that the links may actually vary, meaning "Band" will lead to a different destination than "Facebook".

Since you specified that this layout adjustment is only needed for small screen sizes, we can leverage media queries and CSS grid effectively here. Keep in mind that CSS grid may have some compatibility issues: https://caniuse.com/#feat=css-grid

#menu {

  align-items: center;
  margin: 0 5px 0 5px;
  height: 30px;
  /*The Default grid*/
  display:grid;
  grid-template-columns: repeat(9, 1fr);
}

#menu a {justify-self: center;}


/*For Smaller screen sizes*/
@media screen and (max-width:800px)
{
  #menu {
   grid-template-columns: repeat(5, 1fr);    
   grid-template-rows: 1fr 1fr;
  }
  
  /*Set the social links to be on row 2*/
  #menu .social {
    grid-row-start:2;
  }
  
  
}
<div id="menu">
  <a href="band.html">Band</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/facebook.png"></a>
  <a href="band.html">Photos</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/instagram.png"></a>
  <a href="band.html">Video</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/vk.png"></a>
  <a href="band.html">Merch</a>
  <a href="band.html" class="social"><img class="socials" src="images/socials/youtube.png"></a>
  <a href="band.html">Contacts</a>
</div>

Click the "Full page" link in the demo to view the larger screen grid layout.

Answer №2

Give this a try:

<div id="menu">
    <div class="nav">
        <div class="menu_item"><a href="band.html">Band</a></div>
        <div class="menu_item"><a href="band.html">Photos</a></div>
        <div class="menu_item"><a href="band.html">Video</a></div>
        <div class="menu_item"><a href="band.html">Merch</a></div>
        <div class="menu_item"><a href="band.html">Contacts</a></div>
    </div>

    <div class="social">
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/facebook.png"></a></div>
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/instagram.png"></a></div>
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/vk.png"></a></div>
        <div class="menu_item2"><a href="band.html"><img class="socials" src="images/socials/youtube.png"></a></div>
    </div>
</div>

Followed by this CSS:

.nav, .social {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 5px 0 5px;
    height: 30px;
    flex-wrap: wrap;
}

.menu_item {
    margin: 0 10px 0 10px;
}

.menu_item2 {
    margin: 0 10px 0 10px;
}

Please keep me updated on your progress.

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

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

javascriptjquerycsshighcharts

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

csscss-float

Is it possible to perform a CSS flip animation without delay?

Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...

htmlcss

design facebook type box scroll bar

After extensively searching through various stackoverflow answers in an attempt to change the CSS for a Facebook likebox scrollbar, I have had no success. Below is the code that I am currently using: <div id="fb-root"></div> <script>(fun ...

javascriptjqueryhtmlcssfacebook

What is the best way to transmit a list item value through a form using a get or post request?

What is the best way to submit a list value using a form? I have a dynamically generated list and I want to send the value of a particular item that is clicked on. I could give each list item a separate name, but since my list is dynamically generated, ...

phphtmlforms

New to using JavaScript and JQuery, attempting to position a form underneath an image at a specific URL for the

Hello, I'm having difficulties placing a form below an image with a specific URL. As someone who is still learning JQuery, I am unsure of what mistake I might be making. Is there anyone who can help me figure out what's wrong here? <html> ...

javascriptjqueryhtmlimageforms

Creating a vertically scaling div with full height using Bootstrap 3

I am facing an issue with creating a full-height website using Twitter because the body min-height set to 100% seems to be causing problems. Here is my CSS code: html{ height:100%; } body{ min-height:100% } #main{ min-height:100%; } And here ...

htmlcsstwitter-bootstrap

Creating a Kendo Menu within an Ext JS Panel

Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;) I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel In case you want to check it out, here's a F ...

javascriptjquerycsskendo-uiextjs4.2

Is there a way to showcase whitespacing in HTML?

I have a database full of content that includes whitespace formatting for display on a webpage. However, when viewed on Stackoverflow using the code tag, the formatting changes. The second way shows how it is stored in the database and how I want it to app ...

htmlasp.net-mvcformattingwhitespace

How to use PHP for setting up a MySQL database?

Currently, I am immersing myself in the world of PHP and MySQL. I decided to take a shot at creating a basic HTML form along with a PHP script to set up a MySQL database. Unfortunately, when I tried to test it out, things didn't go as planned. Upon su ...

phphtmlmysqlforms

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

Create a footer with a centered column orientation

I am currently working on creating a footer with four columns, one of which will display an image while the others will contain useful hyperlinks. This is what I have accomplished so far: http://jsfiddle.net/Lqh5a/ HTML <div id="wrapper"> <div ...

htmlcssimagefooter

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

css

Arranging divs with Bootstrap version 4

Is it necessary to specify the order for each screen size breakpoint when displaying 2 divs in different orders based on the screen size? <div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1"> <div class="order-xs-1 order-sm-1 order ...

htmlbootstrap-4

Is there a way for me to implement my custom CSS design within the Material UI Textfield component?

I have a project in Next.js where I need to create a registration form with custom styles. The issue I'm facing is that I'm struggling to customize a textField using my own CSS. I attempted to use the makeStyles function, but encountered a proble ...

cssreactjsmaterial-uinext.js

Utilize JavaScript to extract content from a text file and showcase it in a Bootstrap modal pop-up through knockout binding

I'm currently working on a function that reads data from a .txt file (located in the website's root directory) and then displays it in a modal dialog box. I believe I've made progress as the file is recognized during debugging, but unfortuna ...

javascripthtmlajaxknockout.jsbootstrap-modal

Tips for including a lang attribute in HTML tags within Next.js

When I ran a performance check on my Next.js portfolio site, I discovered that the main index.html is missing a lang attribute. This absence results in a deduction from the accessibility score. I could add the locale by configuring i18n setup in the next. ...

htmlreactjsnext.js

Troubles encountered with image referencing while generating a styleguide via kss-node

I'm currently utilizing the NodeJS implementation of KSS for my project. The file structure I am working with is as follows: styles (.scss files) public (compiled .css files) images (images & sprites) guide (auto-generated style ...

cssnode.jssassdocumentation-generationknyle-style-sheet

Enhance your iPhone web app with high-resolution retina images!

As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...

javascriptiphonecssweb-applications

How can you use C# code to control the visibility of a table row in HTML?

I am trying to display or hide a table row based on the current month using DateTime.Now.Month in my HTML code, but I can't seem to remember the correct syntax. The code I have tried is not working as expected. Can anyone help me with the correct synt ...

c#html