So, right now my header doesn´t look good on mobile. - The words overlap. They should remain in the same order... I tried to use line-height, which did not really change anything. Maybe you have some suggestions on how I can fix this problem. I am thankful for every suggestion!
[enter
.header {
width: 100%;
height: 7vh;
padding: 0 5%;
color: white;
font-size: larger;
background-color: black;
z-index:100;
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
overflow: hidden;
line-height: 10px;
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
}
nav ul li a {
text-decoration: none;
color: white;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.Menü {
color: white;
text-decoration: none;
margin-left: 40px;
}
<div class="header" >
<nav>
<div>
<Button class="ImageButton"> <input class="ImageButton" type="image" src="/Images/Camellion Logo Website.png"></Button>
</div>
<ul>
<a class="Menü" href="/Galerie/Galerie.html">Galerie</a>
<a class="Menü" href="#Leistungen">Leistungen</a>
<a class="Menü" href="#Kontakt">Kontakt & Standort <i class="fa-solid fa-location-dot"></i></a>
</ul>
</nav>
</div>
There is a thing in CSS called media queries. With media queries you can write for example CSS that only takes effect if screen is certain size.
For example
#media only screen and (min-width: 360px) and (max-width: 800px) {
.header {
height: 60px;
}
}
Will set header height to 60px if the device that the page is opened on has screen width more then 360px and less then 800px.
Here is your code with couple adjustments
* { padding: 0; margin: 0; box-sizing: border-box; }
.header {
width: 100%;
padding: 0 20px;
color: white;
background-color: black;
position: sticky;
z-index:100;
top: 0;
}
.navigation {
margin: auto;
max-width: 1200px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-icon { /* CSS to just to simulate Icon */
height: 40px;
width: 40px;
background-color: white;
border-radius: 10px;
}
.menu {
display: flex;
align-items: center;
gap: 40px;
}
.menu-item {
color: white;
text-decoration: none;
white-space: nowrap; /* Will not let words to break to next line */
font-size: 20px;
font-weight: 700;
}
#media(max-width: 600px) {
.header { padding: 0 10px; }
.navigation { height: 60px; }
.menu { gap: 20px;}
.menu-item { font-size: 14px; }
}
#media(max-width: 400px) {
.menu { gap: 10px;}
.menu-item { font-size: 12px; }
}
<header class="header" >
<nav class="navigation">
<div class="menu-icon" title="Menu icon / hamburger icon"></div>
<div class="menu">
<a class="menu-item" href="/Galerie/Galerie.html">Galerie</a>
<a class="menu-item" href="#Leistungen">Leistungen</a>
<a class="menu-item" href="#Kontakt">Kontakt & Standort <i class="fa-solid fa-location-dot"></i></a>
</div>
</nav>
</header>
You can adjust your css even further. It's very popular to have icons with menu elements and on mobile view they become a bottom navigation bar with big icons and tiny text.
#media (max-width:767px) {
* {
box-sizing: border-box;
}
nav {
flex-direction: column;
}
nav .Menu {
margin-inline: 9px
}
}
good luck
I found this code example of a responsive sidebar menu in this link.
This example is excellent because is totally responsive but
the menu bar elements (Home, News, Contact, About) are always positioned in left part of the menu, i am looking for to position these elements at the top-center in big screen of the page, just like this example
but i was not able to succeed, i am a beginner in css, so i ask for help here, any help is appreciated, thank you very much, here is the code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
First, you have to change the html "sidebar" div, Add another div "a-holder"
<div class="sidebar">
<div class="a-holder">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
then in the css, add a-holder with parameters like these:
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
.a-holder {
margin: auto;
align-self: center;
width: 80%;
}
}
Then the full code will be
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
.a-holder {
margin: auto;
align-self: center;
width: 80%;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<div class="a-holder">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
As of the image provided in the question and the link provided to the template. I believe you have to add an image at the top of side navigations. As of solution to the link provided in the question.
#media screen and (min-width: 767) {
.sidebar{
text-align:center;
margin: 0;
padding: 0;
background-color: #f1f1f1;
height: 100%;
overflow: auto;
}
.sidebar a {
display: inline-block;
color: black;
padding: 16px;
text-decoration: none;
}
}
Simply swap the properties of sidebar from #media screen and (max-width: 700px) to regular one
Here is a sample
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
background-color: #f1f1f1;
overflow: auto;
width: 100%;
height: auto;
position: relative;
}
*{box-sizing: border-box;}
.sidebar::after {content: ''; clear: both; display: table;}
.sidebar .logo {float: left; width: 120px; padding-left: 10px; padding-top: 15px;}
.sidebar .social_links{float: right; width: 100px;}
.sidebar .social_links ul li{list-style:none; display: inline-block;}
.sidebar .social_links ul{margin: 0;}
.sidebar .social_links ul li a {padding: 15px 5px}
.sidebar .menu {float: left; width: calc(100% - 220px); text-align:center;}
.sidebar a {
display: inline-block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
padding: 1px 16px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 200px;
position: fixed;
height: 100%;
}
.sidebar a {float: none;}
.sidebar .logo {float: none; display: block; width: 100%; text-align: center; margin-bottom: 20px;}
.sidebar .menu, .sidebar .social_links {float: none; width: 100%;}
.sidebar .menu a{display: block; }
.sidebar .social_links li {float: none; text-align:center;}
.sidebar .social_links ul{padding-left: 0; width: 100%; text-align:center;}
div.content {margin-left: 0; height: 1000px; margin-left: 200px;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<div class="logo">LOGO HERE</div>
<div class="menu">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="social_links">
<ul>
<li>fb</li>
<li>in</li>
</ul>
</div>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
This code is also responsive when screen size shrinks below 700px
PS: Run the code in full page to see how it looks like in desktop view
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
While testing responsiveness, I encountered the most weird problem. I have these codes for aligning the header as a flexbox and when I resize it over 900px width, the navbar gets out of the header and shows on top of the next element.
Like this:
This thing happens up until 1205px width and then it gets the way I expect it.
Like this:
The anomaly in the first image shouldn't happen because of the media query I have added for Desktop screens.
This is the main code for that part:
HTML:
<header>
<img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo">
<nav>
<ul class="bar">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</nav>
</header>
CSS:
/* Header */
header {
max-width: 100%;
height: 4.54em;
border-bottom: 1px solid seashell;
display: flex;
align-items: center;
flex-direction: column;
background-color: black;
}
header a img {
height: 2.18em;
margin-top: 0.45em;
}
nav ul li {
display: inline-flex;
text-decoration: underline;
padding: 0.13em 0.25rem 0 0.25rem;
}
nav ul li a {
color: seashell;
}
And this is the media query for Desktop:
/* Header for Desktop Screens */
#media only screen and (min-width: 900px) {
header {
height: 3.13em;
justify-content: space-between;
}
header a img {
height: 2.27em;
margin: 0.30em 0 0 0.45em;
}
nav ul li {
padding: 0;
margin: 0.45em 0.45em;
font-size: 1em;
}
}
The weirdest thing happened when I inserted "and" after the condition, like this:
#media only screen and (min-width: 900px) and {
...
}
Then it got fixed while it shouldn't have because that's just not the right syntax:
Can anyone help me understand what's happening here and how to fix the problem in the first image?
You forgot to define flex-direction: row for the media query:
/* Header */
header {
max-width: 100%;
height: 4.54em;
border-bottom: 1px solid seashell;
display: flex;
align-items: center;
flex-direction: column;
background-color: black;
}
header a img {
height: 2.18em;
margin-top: 0.45em;
}
nav ul li {
display: inline-flex;
text-decoration: underline;
padding: 0.13em 0.25rem 0 0.25rem;
}
nav ul li a {
color: seashell;
}
/* Header for Desktop Screens */
#media only screen and (min-width: 900px) {
header {
height: 3.13em;
justify-content: space-between;
flex-direction: row;
}
header a img {
height: 2.27em;
margin: 0.30em 0 0 0.45em;
}
nav ul li {
padding: 0;
margin: 0.45em 0.45em;
font-size: 1em;
}
}
<header>
<img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo">
<nav>
<ul class="bar">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</nav>
</header>
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.
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation__items {
display: flex;
justify-content: space-between;
}
.tmp {}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media only screen and (max-width: 500px) {
.navigation__items {
margin-top: 25px;
width: 100%;
}
}
<nav class="navigation">
<img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
<ul class="navigation__items">
<div class="tmp">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
</div>
<li class="navigation__item subscribe">
S'inscrire
</li>
</ul>
</nav>
PS: the div with "tmp" class doesn't originally exist in the code, I added it just to indicate the idea I have in mind.
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.
Also, the underline on click is adjusted.
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation img { /*for test*/
width: 100px;
}
.navigation__items {
display: flex;
justify-content: space-between;
padding: 0;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media (max-width: 500px) {
.navigation__items {
margin-top: 25px;
/*width: 100%;*/
}
}
#media (max-width: 767px) {
.navigation {
position: relative;
}
.navigation__items {
width: 100%;
}
.navigation__item a {
display: flex;
justify-content: center;
padding: 11px 0;
}
.navigation__item {
flex: auto;
text-align: center;
}
.navigation__item.subscribe {
position: absolute;
top: 0;
right: 0;
}
.navigation__item a:active {
border-top: unset;
border-bottom: 2px solid #0065fc;
}
}
<nav class="navigation">
<img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
<ul class="navigation__items">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
<li class="navigation__item subscribe">S'inscrire</li>
</ul>
</nav>
So, this is the layout and how things could be grouped, right? (small-screen-first of course)
You can totally do this with grid as well - but here's how I'd do it with flex-box;
you can use flex's order
and A few margin: autos in there.
https://codepen.io/sheriffderek/pen/a16a64f1910cbd05116dd1a9ae37a372?editors=1100
/* reset included */
* {
box-sizing: border-box;
}
header {
/* probably has a column in it */
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.logo {
display: block;
}
.thing {
display: block;
margin-left: auto; /* trick */
}
.site-menu {
width: 100%;
display: flex;
flex-direction: row;
}
.link {
display: block;
flex-basis: 50%;
}
#media (min-width: 600px) {
header {
justify-content: flex-end;
}
.logo {
margin-right: auto; /* trick */
}
.thing {
order: 5;
margin-left: unset; /* override */
}
.site-menu {
width: auto;
}
}
header {
border: 4px solid dodgerblue;
}
.logo {
border: 4px solid orange;
padding: 10px;
}
.thing {
border: 4px solid yellow;
padding: 10px;
}
.site-menu {
border: 4px solid lime;
}
.link {
border: 4px solid #ff0066;
padding: 10px;
}
<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>
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.
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation__items {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
padding: 0;
}
.tmp {
display: flex;
flex-wrap: nowrap;
}
.tmp .navigation__item {
flex: 0 0 50%;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media screen and (max-width: 767.98px) {
.navigation {
display: block;
position: relative;
}
.tmp {
flex: 0 0 100%;
}
.subscribe {
position: absolute;
top: 0;
right: 0;
}
}
<nav class="navigation">
<img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
<ul class="navigation__items">
<div class="tmp">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
</div>
<li class="navigation__item subscribe">
S'inscrire
</li>
</ul>
</nav>
Just add flex-direction: column-reverse; to .navigation__items class in media queries:
#media only screen and (max-width: 500px) {
.navigation__items {
flex-direction: column-reverse;
}
}
Codepen: https://codepen.io/manaskhandelwal1/pen/rNMqpoY?editors=1100
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;
}
}
More information about grids here: https://www.w3schools.com/css/css_grid.asp
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 🙂
Tell me this works pal ,
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.logo {
display: block;
}
.thing {
display: block;
margin-left: auto; /* trick */
}
.site-menu {
width: 100%;
display: flex;
flex-direction: row;
}
.link {
display: block;
flex-basis: 50%;
}
#media (min-width: 600px) {
header {
justify-content: flex-end;
}
.logo {
margin-right: auto; /* trick */
}
.thing {
order: 5;
margin-left: unset; /* override */
}
.site-menu {
width: auto;
}
}
.thing {
display: block;
margin-left: auto; /* trick */
}
.logo {
border: 4px solid orange;
padding: 10px;
}
.link {
padding: 10px;
text-align: center;
border-top: 4px solid transparent;
}
.link:active {
border-top: 4px solid #007cff;
padding: 10px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<header>
<a class='logo' >
Fancy Text
</a>
<a class='thing' >
thing
</a>
<nav class='site-menu'>
<a class='link' >
link 1
</a>
<a class='link' >
link 2
</a>
</nav>
</header>
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.
Nevertheless here’s the code you need:
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation img {
width: 100px;
}
.navigation-items {
display: flex;
justify-content: space-between;
padding: 0;
}
.navigation-item {
list-style: none;
}
.navigation-item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation-item a:hover {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media (max-width: 600px) {
.navigation-items {
margin-top: 25px;
/*width: 100%;*/
}
}
#media (max-width: 700px) {
.navigation {
position: relative;
}
.navigation-items {
width: 100%;
}
.navigation-item a {
display: flex;
justify-content: center;
padding: 11px 0;
}
.navigation-item {
flex: auto;
text-align: center;
}
.navigation-item.subscribe {
position: absolute;
top: 0;
right: 0;
}
.navigation-item a:active {
border-top: unset;
border-bottom: 2px solid #0065fc;
}
}
<nav class="navigation">
<img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
<ul class="navigation-items">
<li class="navigation-item"><u>Hébergements</u></li>
<li class="navigation-item"><u>Activités</u></li>
<li class="navigation-item subscribe"><u>S'inscrire</u></li>
</ul>
</nav>
I have created a solution using flexbox as you wanted - HTML is also simplified - 'tmp' container no longer required.
.navigation {
display: flex;
align-items: center;
}
.navigation__items {
display: flex;
margin-left:auto;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media only screen and (max-width: 500px) {
.navigation {
flex-wrap:wrap;
}
.navigation__items {
margin-top: 25px;
width: 100%;
order:3;
}
.navigation__items li {
width:50%;
}
.navigation__items_alt {
margin-left:auto;
order:2;
}
}
<nav class="navigation">
<img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
<ul class="navigation__items">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
</ul>
<ul class="navigation__items_alt">
<li class="navigation__item subscribe">
S'inscrire
</li>
</ul>
</nav>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
}
a{
text-decoration: none;
color: #0065fc;
}
.header{
margin:auto;
width:90%;
display: flex;
height: 4rem;
justify-content: space-between;
}
.logo{
display: inline-flex;
vertical-align: middle;
font-size: 2rem;
}
.logo img{
padding:.25rem;
height: 4rem;
justify-content: center;
}
.nav{
display: inline-flex;
flex-direction: row-reverse;
}
ul{
display: inline-flex;
margin-right: 0;
list-style:none;
}
ul li a{
text-decoration: none;
display: inline-flex;
padding-left: 2.5rem;
padding-right: 2.5rem;
line-height:4rem ;
margin-right: 0;
border-top: 2px solid #0065fc;
}
#media only screen and (max-width: 800px) {
.nav2{
display: flex;
width: 100%;
position: absolute;
margin-top: 4rem;
justify-content:space-evenly;
}
.nav2 li a{
border-top: none;
border-bottom: 2px solid #0065fc;
}
}
<div class="header">
<div class="logo">
Reservia
</div>
<div class="nav">
<ul>
<li>S'inscrire</li>
</ul>
<ul class="nav2">
<li>Hébergements</li>
<li>Activités</li>
</ul>
</div>
</div>
Steps to think:
Breaking One Menu to Two Lists
Rearranging second list using media query.
I hope this helps. Only flex is used. No Grid
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.
/* `XHTML, HTML4, HTML5 Reset
-------------------------------*/
a,b,body,div,li,nav,ol,span,ul{border:0;margin:0;padding:0;font-size:100%}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-family:'Open Sans',sans-serif;font-size:15px;font-weight:400;height:100%;background-color:#f7f7f7;color:#212121}nav{display:block}ol,ul{list-style:none}li{display:list-item}a{color:inherit;text-decoration:none}button{font-family:'Open Sans',sans-serif;border:0;margin:0;padding:0;outline:0}
/*main css starts*/
.mainNav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.navItems {
display: flex;
width: 100%;
margin-top: 15px;
}
.navItems > li {
width: 50%;
text-align: center;
}
.mainNav .logo {
font-family: cursive;
font-size: 2.5em;
font-weight: bold;
color: #0065fc;
}
#media (min-width: 768px) {
.mainNav {
align-items: baseline;
}
.mainNav .subs {
order: 3;
padding: 5px 15px;
}
.mainNav .logo {
flex: 1;
}
.navItems {
width: auto;
}
.navItems > li {
width: auto;
padding: 5px 15px;
}
}
<nav class="mainNav">
<a class="logo" href="#">Reservia</a>
<a class="subs" href="#">S'inscrire</a>
<ul class="navItems">
<li>Hébergements</li>
<li>Activités</li>
</ul>
</nav>
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:
I started with restructuring your HTML:
<nav>
<img alt="Logo Reservica"/>
<a>S'inscrire</a>
<ul>
<li><a>Hébergements</a></li>
<li><a>Activités</a></li>
</ul>
</nav>
Then I created a grid with 2 columns:
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;
}
}
<nav>
<img alt="Logo Reservica"/>
<a>S'inscrire</a>
<ul>
<li><a>Hébergements</a></li>
<li><a>Activités</a></li>
</ul>
</nav>
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
.flex-container {
}
.flex-container-left > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
float:left;
}
.flex-container-right > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
float:right;
}
.flex-container-left .bottom{
float:right;
}
#media only screen and (max-width: 500px) {
.flex-container {
display: flex;
flex-direction: column;
width: 100%;
}
.flex-container-right{
width:100%;
}
}
<div class="flex-container">
<div class="flex-container-left">
<div>1</div>
<div class="bottom">4</div>
</div>
<div class="flex-container-right">
<div>3</div>
<div>2</div>
</div>
</div>
Here is the screenshot of Desktop view :
500px width screen size view :
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation img {
width: 100px;
}
.navigation__items {
display: flex;
justify-content: space-between;
padding: 0;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media (max-width: 500px) {
.navigation__items {
margin-top: 25px;
/*width: 100%;*/
}
}
#media (max-width: 767px) {
.navigation {
position: relative;
}
.navigation__items {
width: 100%;
}
.navigation__item a {
display: flex;
justify-content: center;
padding: 11px 0;
}
.navigation__item {
flex: auto;
text-align: center;
}
.navigation__item.subscribe {
position: absolute;
top: 0;
right: 0;
}
.navigation__item .active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-bottom: 2px solid #0065fc;
}
}
#media(min-width: 768px){
.navigation__item .active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
}
<nav class="navigation">
<img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
<ul class="navigation__items">
<li class="navigation__item"><a class="active" href="#">Hébergements</a></li>
<li class="navigation__item">Activités</li>
<li class="navigation__item subscribe">S'inscrire</li>
</ul>
</nav>
I would like to thank scooterlord
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 :
.flex-container {
display: flex;
justify-content: center;
/*background-color: DodgerBlue;*/
}
.flex-container > div {
/* background-color: #f1f1f1;*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#first-section{
width: 30%;
}
#second-section{
width: 60%;
margin-top: -200px;
background: white
}
<body>
<div header>
<img width="100%" src="https://backgrounddownload.com/wp-content/uploads/2018/09/header-background-6.jpg" />
</div>
<div class="flex-container">
<div id="first-section"> <h2>Design Trade Program</h2>
<p>
Qualified interior decorators, designers, stylists and architects can enjoy an exclusive 20% discount on full-priced merchandise with no minimum purchase.
</p>
<p>
Want to join? Please fill in the below details and we will follow up with you directly within one to two business days. Additional services are available to design professionals depending on your location.
</p></div>
<div id="second-section"> <h2>Design Trade Program</h2>
<p>
Qualified interior decorators, designers, stylists and architects can enjoy an exclusive 20% discount on full-priced merchandise with no minimum purchase.
</p>
<p>
Want to join? Please fill in the below details and we will follow up with you directly within one to two business days. Additional services are available to design professionals depending on your location.</div>
</div>
</body>
hi ,this code its ok for normal window but when show on tablet or mobile its not good,i want first show header then first-section finally second-second when use mobile,how i can use true show when show this code in mobile(worked responsive)
thanks
.flex-container {
display: flex;
justify-content: center;
/* background-color: DodgerBlue; */
flex-wrap: wrap;
}
.flex-container > div {
/* background-color: #f1f1f1;*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#first-section{
width: 30%;
}
#second-section{
width: 60%;
margin-top: -200px;
background: white
}
#media screen and (min-width: 320px) and (max-width: 1024px) {
#first-section{
flex: 0 0 100%;
}
#second-section{
flex: 0 0 100%;
margin-top: -200px;
background: white
}
}
one way is to use percent not the pixel values and I think the negative values won't work in margin.
for this, you can use media queriesin CSS.
For example, for showing the content on your website on mobile, I would do:
#media (min-width: 320px) and (max-width: 767px) {
.flex-container { flex-flow: column; }
.flex-container > div { width: 100% }
.second-section { margin-top: 10px }
}
To also cover the tablet size, just change (max-width: 767px) to (max-width: 1024px) and the sections will stack on tablet as well.
So, your full CSS would be:
.flex-container {
display: flex;
justify-content: center;
/*background-color: DodgerBlue;*/
}
.flex-container > div {
/* background-color: #f1f1f1;*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#first-section{
width: 30%;
}
#second-section{
width: 60%;
margin-top: -200px;
background: white
}
#media (min-width: 320px) and (max-width: 767px) {
.flex-container { flex-flow: column; }
.flex-container > div { width: 100% }
.second-section { margin-top: 10px }
}
Here is a list of useful media queries for different devices: CSS Media Queries for Desktop, Tablet, Mobile
Please use below code in your style file.Hope so this gives your expected output for mobile or iPad.
#media screen and (max-width: 1279px) {
.flex-container {
flex-direction: column;
}
#first-section, #second-section {
width: 100%;
}
}