Please advise how to line up my navbar links to my title. I would also like for the navbar links to be spaced out. When I view the links on my phone they're pretty close to one another. I would like my title to be on the far left & links on the far right with some padding. Please see my code below.
Thank you!
HTML
</head>
<body>
<header id="header">
<div id="logo">
<span>My Site</span>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#"><b>About</b></a></li>
<li><a class="nav-link" href="#"><b>Work</b></a></li>
<li><a class="nav-link" href="#"><b>Blog</b></a></li>
</ul>
</nav>
</header>
CSS
#header {
top: 0;
left: 0;
right: 0;
position: relative;
background-color: #707793;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Pacifico", sans-serif;
}
#logo {
display: flex;
flex-direction: column;
align-items: center;
}
#logo span {
color: #d9fff6;
text-shadow: 2px 2px 5px #70fad9;
font-size: 30px;
}
#logo img {
width: 75px;
height: 60px;
}
#nav-bar ul {
padding: 0;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
}
#nav-bar .nav-link {
color: #f6f7f8;
padding: 0;
text-decoration: none;
font-size: 20px;
font-family: "Handlee", sans-serif;
text-shadow: 2px 2px 5px #bec1ce;
}
#media only screen and (min-width: 460px) {
#logo {
flex-direction: row;
}
#logo img {
width: 85px;
height: 70px;
}
#logo span {
font-size: 25px;
margin-left: 20px;
}
#nav-bar .nav-link {
padding: 5px 30px;
}
}
#media only screen and (min-width: 900px) {
#header{
flex-direction: row;
justify-content: space-around;
}
#nav-bar .nav-link {
padding: 0px 20px;
}
}
#media only screen and (min-width: 992px) {
#logo span {
font-size: 30px;
}
#logo img {
width: 100px;
height: 85px;
}
}
Can you please try with this code , hope it will resolve your query. We simply add one media query for the mobile resolution under 460px, you can change this value based on your requirement.
#header {
top: 0;
left: 0;
right: 0;
position: relative;
background-color: #707793;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Pacifico", sans-serif;
}
#logo {
display: flex;
flex-direction: column;
align-items: center;
}
#logo span {
color: #d9fff6;
text-shadow: 2px 2px 5px #70fad9;
font-size: 30px;
}
#logo img {
width: 75px;
height: 60px;
}
#nav-bar ul {
padding: 0;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
}
#nav-bar .nav-link {
color: #f6f7f8;
padding: 0;
text-decoration: none;
font-size: 20px;
font-family: "Handlee", sans-serif;
text-shadow: 2px 2px 5px #bec1ce;
}
#media only screen and (min-width: 460px) {
#logo {
flex-direction: row;
}
#logo img {
width: 85px;
height: 70px;
}
#logo span {
font-size: 25px;
margin-left: 20px;
}
#nav-bar .nav-link {
padding: 5px 30px;
}
}
#media only screen and (min-width: 900px) {
#header {
flex-direction: row;
justify-content: space-around;
}
#nav-bar .nav-link {
padding: 0px 20px;
}
}
#media only screen and (min-width: 992px) {
#logo span {
font-size: 30px;
}
#logo img {
width: 100px;
height: 85px;
}
}
#media only screen and (max-width: 460px) {
#header{
flex-direction: row;
padding: 0px 10px;
justify-content: space-between;
}
#nav-bar .nav-link {
padding: 0 7px;
font-size: 18px;
}
#nav-bar li:last-child .nav-link {
padding-right: 0;
}
}
<header id="header">
<div id="logo">
<span>My Site</span>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#"><b>About</b></a></li>
<li><a class="nav-link" href="#"><b>Work</b></a></li>
<li><a class="nav-link" href="#"><b>Blog</b></a></li>
</ul>
</nav>
</header>
Related
I have a flex layout, and its code like following
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item ">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
And its css like this
.navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto !important;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.navbar-nav .nav-item a {
color: #fff;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
It looks like this
The a element currently appears to have no height, and I want it to be as heigh as the parent element, how? Thank you.
Append:
The image shows what it looks like when I'm in chrome developer mode. Above is all my code.
The issue is with the default style of ul element.
ul has a default margin value of 1em as below.
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
You have to override this and bring this to you anchor tag as padding, because you are handling the hover effect of anchor tag. So this value should be set as the padding so that this will not break the layout while hovering.
I have fixed that in the below snippet.
Working Fiddle
.navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto !important;
margin: 0; /* Added */
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.navbar-nav .nav-item a {
color: black;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
/* New styles added */
.navbar-nav .nav-item a {
padding: 1em 0;
}
.navbar-nav .nav-item a:hover {
color: #fff;
background-color: #6c757d;
}
.navbar-collapse {
background-color: #00a82d;
}
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item ">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
I implemented now the rest of your code from the fiddle within the comments. You need to give the ul a height of 100% of the parent: .navbar-nav { height: 100%; }. In my snippet you have in CSS-line 301 declared: a { display: block; } -> swap the value to flex to keep the text from the anchor centered.
.navbar-nav {
height: 100%;
}
.navbar-nav a {
display: flex; /* swap this with line 301 */
}
/* original css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: 0;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
img {
border-style: none;
vertical-align: middle;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
html {
font-size: 625%;
font-family: "Roboto", Arial, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
body {
font-size: 0.16rem;
height: 100%;
width: 100%;
color: #6c757d;
line-height: 1.75;
}
a {
text-decoration: none;
}
.wrapper {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.container {
width: 100%;
flex-shrink: 0;
}
.row {
padding: 0 .12rem;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex: 1;
}
.navbar-brand {
font-size: 0.32rem;
color: #00a82d;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-collapse {
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto!important;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.device-width {
width: 9.6rem;
margin: 0 auto;
}
.usercenter-navbar {
background-color: #00a82d;
line-height: 1;
}
.usercenter .device-width {
width: 98%;
}
.usercenter-navbar .navbar-brand {
color: #fff;
font-size: .28rem;
font-weight: 700;
}
.usercenter-navbar .navbar-nav .nav-item a {
color: #fff;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
/* display: block; */
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
.usercenter-navbar .navbar-nav .nav-item a:hover {
color: #fff;
background-color: #6c757d;
}
#media screen and (max-width: 768px) {
body {
font-size: 0.13rem;
}
.auth-form {
width: 80%;
}
}
#media (min-width: 1200px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 22%;
}
}
#media (min-width: 1920px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 20%;
}
}
#media (min-width: 1200px) and (max-width: 1919px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 26%;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.device-width {
width: 10.8rem;
}
.auth-form {
width: 30%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.device-width {
width: 9.6rem;
}
.auth-form {
width: 30%;
}
}
<div class="wrapper usercenter">
<div class="container usercenter-navbar">
<div class="device-width">
<div class="row">
<a class="navbar-brand" href="/">Workspace</a>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item current">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm new to the world of HTML/CSS and currently working through an online course. I've been working on one of my projects for a few hours and am absolutely stumped with an issue with my navigation bar.
The logo and nav links display fine on a desktop browser; however, when you make the browser the minimum size or browse on a mobile, the logo image is cut off on the right-hand side.
Any help would be greatly appreciated.
#import url('https://fonts.googleapis.com/css?family=Roboto');
.top-bar {
display: flex;
background-color: #ECECEC;
flex-wrap: wrap;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: top;
}
.header-img {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
max-width: 534px;
height: auto;
padding: 10px 20px 10px 20px;
margin-right: auto;
margin-left: auto;
}
.nav-bar {
display: flex;
flex: 2;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-family: 'Roboto', serif;
padding: 5px 0px 5px 0px;
}
.nav-bar a{
color: black;
text-decoration: none;
border-right: 1px solid black;
padding: 0px 5px 0px 5px;
}
.nav-bar a:hover {
color: #808080;
}
.nav-bar a:last-of-type {
border: none;
}
#home {
flex-basis: 20%;
display: flex;
justify-content: center;
}
#features {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#video {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#pricing {
display: flex;
flex-basis: 20%;
justify-content: center;
}
body {
padding: 100px 0px 0px 0px;
}
<header id="header">
<title>Eltee's Electric Drums</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto">
<div class="top-bar">
<img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img"></img>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#home" id="home">Home</a>
<a class="nav-link" href="#features" id="features">Features</a>
<a class="nav-link" href="#video" id="video">Video</a>
<a class="nav-link" href="#pricing" id="pricing">Pricing</a>
</nav>
</header>
You needed a media query to deal with mobile viewport. I've added to your script as .top-bar img. Also your markup was located in the incorrect spot. <style> tag lives inside <head> and following </head> you need body tag and inside body tag is where your markup lives. so it should go as follows <html><head><style>css lives here</style></head><body>markup lives here</body></html>
See snippet for working solution, though it will likely only show the mobile solution given the snippet editor dimensions, so ingest the markup and styling into your page and it should works as expected for both mobile and desktop.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
.top-bar {
display: flex;
background-color: #ECECEC;
flex-wrap: wrap;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: top;
}
#media only screen and (max-width: 500px) {
.top-bar img {
display: flex;
width: 100%;
box-sizing: border-box;
}
}
.header-img {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
max-width: 534px;
height: auto;
padding: 10px 20px 10px 20px;
margin-right: auto;
margin-left: auto;
}
.nav-bar {
display: flex;
flex: 2;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-family: 'Roboto', serif;
padding: 5px 0px 5px 0px;
}
.nav-bar a {
color: black;
text-decoration: none;
border-right: 1px solid black;
padding: 0px 5px 0px 5px;
}
.nav-bar a:hover {
color: #808080;
}
.nav-bar a:last-of-type {
border: none;
}
#home {
flex-basis: 20%;
display: flex;
justify-content: center;
}
#features {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#video {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#pricing {
display: flex;
flex-basis: 20%;
justify-content: center;
}
body {
padding: 100px 0px 0px 0px;
}
<html>
<body>
<header id="header">
<title>Eltee's Electric Drums</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto">
<div class="top-bar">
<img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img"/>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#home" id="home">Home</a>
<a class="nav-link" href="#features" id="features">Features</a>
<a class="nav-link" href="#video" id="video">Video</a>
<a class="nav-link" href="#pricing" id="pricing">Pricing</a>
</nav>
</div>
</header>
</body>
</html>
You could put your logo inside a div that would shrink and grow as a flex item. And tell the logo to fit the div.
#import url('https://fonts.googleapis.com/css?family=Roboto');
.top-bar {
display: flex;
background-color: #ECECEC;
flex-wrap: wrap;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: top;
}
.header-img {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
max-width: 534px;
height: auto;
padding: 10px 20px 10px 20px;
margin-right: auto;
margin-left: auto;
}
.header-img img{
width:100%;
height:auto;
}
.nav-bar {
display: flex;
flex: 2;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-family: 'Roboto', serif;
padding: 5px 0px 5px 0px;
}
.nav-bar a{
color: black;
text-decoration: none;
border-right: 1px solid black;
padding: 0px 5px 0px 5px;
}
.nav-bar a:hover {
color: #808080;
}
.nav-bar a:last-of-type {
border: none;
}
#home {
flex-basis: 20%;
display: flex;
justify-content: center;
}
#features {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#video {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#pricing {
display: flex;
flex-basis: 20%;
justify-content: center;
}
body {
padding: 100px 0px 0px 0px;
}
<header id="header">
<title>Eltee's Electric Drums</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto">
<div class="top-bar">
<div class="header-img"> <img src="https://i.imgur.com/KCS3KND.png" id="header-img" ></img></div>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#home" id="home">Home</a>
<a class="nav-link" href="#features" id="features">Features</a>
<a class="nav-link" href="#video" id="video">Video</a>
<a class="nav-link" href="#pricing" id="pricing">Pricing</a>
</nav>
</div>
</header>
right now the purple just covers the text but it should be a nice block of colour like the dropdown is. Also, I have a bar under my nav img that should not be there when I hover. I know it is a width/height thing, but no matter where I put the code it does not work.
https://codepen.io/Smoki248/pen/NWxrOWK
li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;
}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}
nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;
}
.dropdown > li a {
font-size: 16px;
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}
.dropdown-content li a {
float: none;
color: #f4f4f4;
padding: 10px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #625aa9;
color: #f4f4f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li>About</li>
<li>Services</li>
<div class="dropdown">
<li><i class="fa fa-caret-down"></i> Portfolio<li>
<div class="dropdown-content">
<ul>
<li>Photography</li>
<li>Composite</li>
<li>Logos</li>
<li>Branding</li>
<li>Advertising</li>
</ul>
</div>
</div>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
</header>
The problem is tag a's default display is inline, so if you want to adjust height of a tag, you have to change it's default display to display: inline-block like this, and then you may be able to do whatever you want with that a tag, you can refer my code below for more details:
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}
you can take a look in my codepen.io for more details here. Hope it will help
I would like to make the image in the center of the navigation bar slide down when the width of the page decreases.
This is how it looks like on a desktop:
Whereas on a smartphone the navigation bar should look like this:
As you can see, I would like the nav bar to remain as it is, except for the image to slide down the first row.
body {
background-color: gray;
color: white;
font-family: Helvetica Neue;
}
/* Header */
header {
background-color: black;
background-image: url("images/spiaggia.jpg");
background-size: 100%;
background-position: center;
padding: 2px;
color: white;
height: 200px;
background-repeat: no-repeat
}
section {
background-color: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
div {
background-color: black;
display: inline-block;
width: 100px;
margin: auto;
color: white;
}
header ul {
margin: 0px;
padding: 0px;
}
header li {
text-decoration: none;
display: inline-block;
margin-right: 20px;
}
header .mobile {
display: none;
}
a {
color: white;
text-decoration: none;
}
.logo {
background-image: url("images/città.jpg");
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 50px;
position: relative;
text-indent: -999999px;
top: 0px;
width: 100px;
border: solid lightblue;
}
/* Features */
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 10%;
box-shadow: gray 0 0 10px;
width: 200px;
}
/* Footer */
footer {
background: black;
padding: 10px 20px;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
#media (max-width: 600px) {
.mobile {
display: inline-block;
}
.desktop {
display: none;
}
}
<header>
<ul>
<li>Home</li>
<li>Menu</li>
<li><a class="logo" href="Home.html">Cadice_foto</a></li>
<li class="mobile">Locations</li>
<li class="mobile">Contacts</li>
<li class="desktop">Locations</li>
<li class="desktop">Contacts</li>
</ul>
</header>
<section class="features">
<figure>
<img src="images/porticciolo.jpg" alt="porticciolo Cadice">
<figcaption>Porticciolo Cadice</figcaption>
</figure>
<figure>
<img src="images/palme.jpg" alt="palme Cadice">
<figcaption>palme Cadice</figcaption>
</figure>
<figure>
<img src="images/sera.jpg" alt="sera Cadice">
<figcaption>sera Cadice</figcaption>
</figure>
</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - email#email.com</footer>
This can be done with a css flex-box, and re-ordering the flex elements when your mobile view media query activates.
.menu-container {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.menu-container>* {
padding: 10px;
flex: 1 20%;
}
#media all and (min-width: 600px) {
.menu-container>* {
flex: 1;
counter-increment: menulink;
order: counter(menulink);
}
.menu-left {
order: 1
}
.menu-right {
order: 3
}
.logo-menu {
order: 2;
}
}
body {
background-color: gray;
color: white;
font-family: Helvetica Neue;
}
/* Header */
header {
background-color: black;
background-image: url("http://placekitten.com/1000/500?image=6");
background-size: 100%;
background-position: center;
padding: 2px;
color: white;
height: 200px;
background-repeat: no-repeat
}
section {
background-color: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
a {
color: white;
text-decoration: none;
}
.logo {
background-image: url("http://placekitten.com/200/100");
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 50px;
position: relative;
text-indent: -999999px;
top: 0px;
width: 100px;
border: solid lightblue;
}
/* Features */
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 10%;
box-shadow: gray 0 0 10px;
width: 200px;
}
/* Footer */
footer {
background: black;
padding: 10px 20px;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
.menu-container {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.menu-container>* {
padding: 10px;
flex: 1 20%;
}
#media all and (min-width: 600px) {
.menu-container>* {
flex: 1;
counter-increment: menulink;
order: counter(menulink);
}
.menu-left {
order: 1
}
.menu-right {
order: 3
}
.logo-menu {
order: 2;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="11.css" type="text/css" />
</head>
<body>
<header class="menu-container">
<a class="menu-left" href="Home.html">Home</a>
<a class="menu-left" href="website/Menu.html">Menu</a>
<a class="menu-right"href="website/Locations.html">Locations</a>
<a class="menu-right" href="website/Contacts.html">Contacts</a>
<div class="logo-menu"><a class="logo" href="Home.html">Cadice_foto</a></div>
</header>
<section class="features">
<figure>
<img src="http://placekitten.com/150/150?image=2" alt="porticciolo Cadice">
<figcaption>Porticciolo Cadice</figcaption>
</figure>
<figure>
<img src="http://placekitten.com/150/150?image=8" alt="palme Cadice">
<figcaption>palme Cadice</figcaption>
</figure>
<figure>
<img src="http://placekitten.com/150/150?image=4" alt="sera Cadice">
<figcaption>sera Cadice</figcaption>
</figure>
</section>
<section>lower-section</section>
<footer>Via Lars, somewhere IT - numero: uno!- email#email.com</footer>
</body>
</html>
Add the following in media query below in your CSS:
.logo {
position: absolute;
top: 50px;
left: 0;
right: 0;
margin: 0 auto;
}
You may want to know what this code does. The position property specifies the type of positioning used for an element. The top property is the vertical position of a positioned element. The left and the right properties are written to reset positioning (these are "auto" by default), and then margin which is "0 auto" to align element by center. https://www.w3schools.com/css/css_margin.asp
You should probably see some info about media-queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
P.S. And remember DRY (Do not Repeat Yourself). Try to avoid writing twice, especially something like this:
<li class="mobile">Locations</li>
<li class="mobile">Contacts</li>
<li class="desktop">Locations</li>
<li class="desktop">Contacts</li>
You can set every property for every element in every media-query
I have changed your code little bit to achieve what you wanted. Here is the Code
body {
background-color: gray;
color: white;
font-family: Helvetica Neue;
}
/* Header */
header {
background-color: black;
background-image: url("https://www.hotelsantamargherita.it/wp-content/uploads/2017/12/caorle-dalla-spiaggia-di-pon-1440x500.jpg");
background-size: 100%;
background-position: center;
padding: 2px;
color: white;
height: 200px;
background-repeat: no-repeat;
}
section {
background-color: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
div {
background-color: black;
display: inline-block;
width: 100px;
margin: auto;
color: white;
}
.navbar {
margin: 0px;
padding: 0px;
text-align: center;
position: relative;
}
.navbar li {
text-decoration: none;
display: inline-block;
margin-right: 20px;
}
.navbar li a {
color: white;
text-decoration: none;
}
.logo a {
background-image: url("http://www.florenceholidays.com/image/66-05.jpg");
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 50px;
position: relative;
text-indent: -9999px;
top: 0px;
width: 100px;
border: solid lightblue;
}
/* Features */
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 10%;
box-shadow: gray 0 0 10px;
width: 200px;
}
/* Footer */
footer {
background: black;
padding: 10px 20px;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
#media (max-width: 600px) {
.logo {
position: absolute;
top: 50px;
left: 50%;
transform: translatex(-50%)
}
}
<header>
<ul class="navbar">
<li>Home</li>
<li>Menu</li>
<li class="logo">Cadice_foto</li>
<li>Locations</li>
<li>Contacts</li>
<!-- <li class="desktop">Locations</li>
<li class="desktop">Contacts</li> -->
</ul>
</header>
<section class="features">
<figure>
<img src="https://picsum.photos/200/300" alt="porticciolo Cadice">
<figcaption>Porticciolo Cadice</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/300" alt="palme Cadice">
<figcaption>palme Cadice</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/300" alt="sera Cadice">
<figcaption>sera Cadice</figcaption>
</figure>
</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - email#email.com</footer>
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
font-size: 14px;
}
header {
width: 100vw;
height: 50px;
background-color: #222;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Container for the Left and Right nav sections*/
header>div {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1140px;
width: 100%;
padding: 0 20px;
}
/* adjust width to set size */
nav {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
display: flex;
padding: 0 20px;
}
nav a {
padding: .8rem 1rem;
}
header>div>a {
font-size: 18px;
border-bottom:
}
.a-tag-header {
text-decoration: none;
color: #999;
display: block;
}
nav a:hover {
color: #fff;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: none;
}
#media screen and (max-width: 890px) {
/* Header */
header {
height: auto;
}
header>div {
flex-direction: column;
padding: 0;
}
nav {
display: flex;
width: 100%;
flex-direction: column;
}
nav ul {
flex-direction: column;
text-align: center;
align-items: center;
padding: 0;
}
nav ul li {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
nav ul li:hover {
background-color: aqua;
}
header>div>a {
padding: .8rem 0;
}
header>div>a:hover {
background-image: #eee;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: inline-block;
color: #F0F0F0;
font-size: 22px;
cursor: pointer;
position: absolute;
}
}
<header>
<div>
<a class="a-tag-header">Chemical Finger Print Analysis</a>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
</div>
</header>
Hi i'm creating a flexbox navigation bar (Desktop First), this contains a title, and a nav with two separate tags. Iv'e gotten the nav and ul tags to act in a responsive manner however I cannot seem to figure out how to get the title and the menu toggle to share the top container responsively when a screen is smaller than 850px, I've tried a number of fixes but i can't seem to figure it out. Please Help
Try this
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
☰
</div>
</body>
</html>