I have a navbar inside a header tag. the header tag is flex. the navbar too. in the navbar i have three a tags with the display value inline-block; and a padding in the height and width. So far so good. When i hover the links the hover effect is shown over the whole height.
The problem: If I add an image to the first link, I can't make the image higher than 10 px because the padding affects the entire navbar height. What I do not want.
Question: How can I add the image to the link without it affecting the height of the navbar?
My code
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<div class="flex">
<div>
<img src="https://via.placeholder.com/30">
</div>
<div>10000</div>
</div>
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
expected
body {
margin: 0;
pading: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px; /* Add a top margin to avoid content overlay */
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
xca
</main>
</div>
Use flex behavior to align and stretch instead of additional markups
In the code snippet below, I removed the extra markup in the first a element that contains the img. Instead, I made all a tags display: inline-flex and removed vertical padding in the first one. Then, using the parent nav element's align-items property, I ensured each a tag has the same full height for consistent hover effect.
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: stretch;
}
.navbar a {
display: inline-flex;
}
.navbar a {
color: #f2f2f2;
justify-content: center;
align-items: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:first-of-type {
padding-top:0;
padding-bottom:0;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<img src="https://via.placeholder.com/30">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
So I want my navbar to be so that the Work and Press elements are aligned on the left side, the YORK logo text in the center and the About and Contact elements on the right. So far i've managed to make it so that the left and right works, but for some reason i cant seem to find my York logo sticks to the left side.
I tried to change what classes i gave the flex property to. I tried to change the way i set up the html as well.
body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
}
.nav-left {
text-align: left;
}
.nav-right {
text-align: right;
position: absolute;
right: 3vw;
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>
body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-left {
text-align: left;
}
.nav-right {
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>
I've added a justify-content: space-between to your header.
Removed the position absolute from your nav-right.
Hope this helps.
I did two editions to your css, remove two declarations that was broken your position in .nav-right {} declaration and add justify-content: space-between; to header {} declaration, let me know if is working for you now.
body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
}
.nav-left {
text-align: left;
}
.nav-right {
/* text-align: right;
position: absolute; */
right: 3vw;
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>
it is making me crazy.
I have a nav bar where there are three div.
Each div has some text that is aligned at center both vertically and horizontally.
When I put an image ( is a svg icon of a zoom lens ) before the "search" text, it moves my text "search" at the bottom.
This is the code:
HTML
<nav>
<div id="leftside">
<img src="img/zoom-lens.png" alt="search">
search
</div>
<div id="middle">
Arkadomundo
</div>
<div id="rightside">
Sign Up
</div>
</nav>
CSS
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
}
#leftside img {
height: 50px;
}
#middle{
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
I guess it's an easy problem for you but honestly I cant find the why it happens
Your #leftside div won't automatically align its contents. Add display: flex; align-items: center; to it too, and everything will be centered vertically:
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
}
#leftside img {
height: 50px;
}
#middle {
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
<nav>
<div id="leftside">
<img src="https://picsum.photos/80/120" alt="image"> search
</div>
<div id="middle">
Arkadomundo
</div>
<div id="rightside">
Sign Up
</div>
</nav>
Try adding display: inline-block; on your CSS for #leftside img
#leftside img {
height: 50px;
display: inline-block;
}
for fixing this, make #left-side flex container and set align-items property to
center because #left-side child's get centered. Or copy this CSS codes:
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
}
#leftside img {
height: 50px;
}
#middle{
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
it s working if I put display flex and align items also on #leftside !
Thank you !
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 :
I was wondering if there was a way to change the position of a navigation bar in mobile view by only using CSS3. For example instead of having the navigation bar underneath the top container in mobile view, I would like to have it fixed above the top container. I am using a wordpress theme, Thanks in advanced.
The website is www.capcar.com.au
You may try "transform" property with media rule.
Add css :
#media only screen and (max-width: 767px) {
.navigation_menu {
background: none repeat scroll 0 0 #ffffff;
position: absolute;
top: 0;
width: 100%;
}
.header_section {
background-color: #ffffff;
color: #99ca00;
padding-top: 51px;
width: 100%;
}
}
Flexbox can solve this issue pretty easily. Just add display: flex and flex-direction to #wrapper. Then, inside of a media query, add order: 0 to .header_section and order: -1 to .navigation_menu. This will switch those two around, but leave everything else in the order it was before.
You should be able to just add this to your css:
#wrapper {
display: flex;
flex-direction: column;
}
#media only screen and (max-width:640px) {
.header_section {
order: 0;
}
.navigation_menu {
order: -1;
}
}
var el = document.getElementById("toggle");
el.addEventListener("click", function(){
var menu = document.getElementById('menu');
menu.classList.toggle("show")
}, false);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: flex;
flex-direction: column;
}
header,
nav ul {
display: flex;
max-width: 800px;
width: 100%;
margin: 0 auto;
justify-content: space-between;
align-items: flex-end;
padding: 1rem 2rem;
}
header {
margin-bottom: 1rem;
}
#logo {
width: 40%;
}
.awards {
display: flex;
align-items: flex-end;
width: 40%
}
#award1 {
width: 25%
}
#award2 {
width: 75%;
}
nav {
background: linear-gradient(to bottom, #e3f5ab 0%, #99ca00 100%);
display: flex;
flex-direction: column;
min-height: 3rem;
}
#toggle {
display: none;
align-self: flex-end;
background: transparent;
border: none;
width: 2rem;
height: 2rem;
margin: .5rem 1rem;
outline: none;
cursor: pointer;
}
nav ul {
list-style: none;
padding: 0 2rem;
}
li {
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
width: 20%;
text-align: center;
}
li a {
display: block;
height: 3rem;
line-height: 3rem;
width: 100%;
text-decoration: none;
color: #02006d;
}
li:hover {
background-color: #ffffff;
}
.caret {
font-size: .6rem;
}
#media screen and (max-width:700px) {
#logo {
width: 70%;
display: block;
margin: 0 auto;
}
#award1 {
display: none;
}
#award2 {
display: none;
}
header {
order: 0;
display: block;
}
nav {
order: -1;
}
#toggle {
display: block;
}
#toggle img {
width: 100%;
}
nav ul {
display: none;
}
nav ul.show {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
width: 100vw;
}
}
<div id="wrapper">
<header>
<img id="logo" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/LOGO-FOR-WEB23.png" />
<div class="awards">
<img id="award1" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/HIA_Logo1.png" alt="" />
<img id="award2" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/MBA_Logo.png" alt="" />
</div>
</header>
<nav>
<button id="toggle"><img src="http://www.tax-consulting-group-san-diego.com/images/taxes-menu-icon.png" alt="" /></button>
<ul id="menu">
<li>Home</li>
<li>About Us</li>
<li>Projects <span class="caret">▼</span></li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
A simple clean demo, and a demo with your site (codepen doesn't like your site, so the header looks weird, but I can't get all the css to load properly—hence the simple demo).
For more info on flexbox here's a snippet from css-tricks and the support tables.
Hope this helps!
Try using the flex property to build your menus. I have great success with this feature and it allows for a number of simple order methods via CSS and media queries. Try CSS-Tricks.com as a reference