Pay attention to your html structure of the <ul> tag. Inside you put the <div> tag, separating the third <li> tag from the first two. This is not correct and it is not a valid html structure. It’s a crutch.
In my example, I set up the list structure correctly. All three <li> tags are now children of the <ul> tag.
Now about the main thing.
The very principle of the transfer of the third <li> tag (subscribe class) is based on absolute positioning.
Wrapping the first two <li> tags is triggered at 767px width.
And yet, in my example, I did not use other types of display, such as grid, table, block, etc. Only flex is used.
<header>
<a class='logo'>
SVG LOGO
</a>
<a class='thing'>
thing
</a>
<nav class='site-menu'>
<a class='link'>
link 1
</a>
<a class='link'>
link 2
</a>
</nav>
</header>
Solution 3 :
Possible Solution:
Change position and layout properties
In mobile, I’ve changed the parent navigation element’s display and position property to block and relative.As a result, the banner and navigation__items element would not come under flexbox modal.
Now we want the temp element to take 100% width, for this, I’ve changed the flex property to 0 0 100%.
To show the ‘subscribe’ button on the top right corner, add its position property to absolute.
I recommend using CSS grid, it is easy, and you can specify, when content should wrap to next line…
nav {
display: grid;
grid-template-rows: auto;
/* aligning and more stuff... */
}
@media only screen and (max-width: 800px) {
nav {
grid-template-rows: auto auto;
}
}
I recommend using the position property. Try the code below
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* Add position to the parent element so the position of tmp class falls to this parent*/
position: relative;
}
/* ... code ... */
/*
Add this code in the media query. Giving .tmp a position property will pull it out of the flex box, meaning flex box won't have an effect on it
*/
.tmp {
/* Make this class position absolute Think of it as absolute to the navigation div */
position: absolute;
/* Position it -20px or something below the navigation div. You can play around with this. */
bottom: -20px
/* left from 50% of the navigation tag */
left: 50%;
/* Pull it back by 50% of its own size on x-axis to center it perfectly */
transform: translateX(-50%);
}
You need the transform property to center it, Otherwise it will be 50% off the screen. Hope this helps
There are a few methods to answer your question, but first let me suggest something.
Please reformat your html
You have a div in your ul.
The div cuts the ul as 2 lis come within it while 1 is placed outside it. This is not valid HTML. Your elements should be positioned in a proper hierarchy.
You can try code below. its all about structuring your html code and using flexbox.
Change or adjust css properties according to your code. I hope this helps you. Good luck.
Grid is often more powerful than flexbox for non-trivial layouts where it allows you to achieve the same result with less code and without redundant wrapper elements.
Your problem could be solved reasonably with flexbox, but why not challenge the assumption of the question and do it using grid, perhaps it will fit you better. Here is a super clean and simple grid solution:
nav {
display: grid;
grid-template-columns: 1fr auto;
}
This puts the img and a into the 1. and 2. column of the 1. row, and the ul ends up in the 1. column of the 2. row. We stretch the ul over both columns and the core of the mobile layout is done:
ul {
grid-column: 1/3;
}
To make this work for desktop, we change the grid to have 3 columns. Then we move the ul to the 2. column of the 1. row. That’s it!
@media (min-width: 600px) {
nav {
grid-template-columns: 1fr auto auto;
}
ul {
grid-row: 1;
grid-column: 2;
}
}
Here is a working example:
nav {
display: grid;
grid-template-columns: 1fr auto;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
grid-column: 1/3;
display: flex;
justify-content: space-evenly;
}
@media (min-width: 600px) {
nav {
grid-template-columns: 1fr auto auto;
}
ul {
grid-row: 1;
grid-column: 2;
}
li {
padding-right: 20px;
}
}
I intentionally use bare HTML with minimal styling in the example to not distract you from the actual solution. If you want to understand grid better, MDN is a great resource: https://developer.mozilla.org/en-US/docs/Web/CSS/grid
I had done the source code by his help. Here his answer on this post
I hope this source code would help you.
Desktop View :
Android View :
Problem :
I’m trying to implement the following responsive behaviour for a navbar.
Here is the result I want on large screens:
And on small screens (Iphone 8 and similar):
I created the navbar using flexbox and the possible solution I have in mind is using flex-wrap: wrap; but I need to find a way to only make the two links (with tmp class) go down when the screen is small and keep the logo and the “S’inscrire” link up when the screen is small.
I’m not sure if flexbox is the best way to achieve that but it’s what I tried, I’m open to any better solution.
