Trying to separate the logo flex box from the social flex box to put fb tt Instagram logos, but it won't work.
Also, I'm trying to make the logo bigger without increasing the header size, trying to make all more slim but without success.
Any tips for both problems?
body {
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head {
background-color: #137B77;
margin: 0;
padding: 0;
align-items: center;
display: flex;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
}
.main-header {
display: flex;
align-items: center;
}
.header-menus {}
.header-menus ul li {
list-style: none;
margin-left: 10px;
color: #000000;
}
.header-menus ul li a {
color: #000000;
text-decoration: none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.logo-image {
width: 100%;
}
.social {
width: 100px;
height: 150px;
background-color: blue;
}
.social-menu {
display: flex;
align-items: center;
}
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://via.placeholder.com/50" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<link rel="stylesheet" type="text/css" href="photos/facebook.png">
f
</div>
</header>
</div>
I'm not sure about your logo without seeing the dimensions of the actual image. I have substituted my own image address for the sake of this question. Some of your code is not necessary such as the .center class. most of what you want to accomplish can be achieved by using some justify-content styling and manually adjusting the position of the logo. Also, you are targeting the logo-image div for the size but if you adjust the actual tag then you can change the size without too much issues. If the logo image is square then you will have some issues with sizing but you could use a negative top and bottom margin on the .image-logo class to remove the extra space.
<style>
body {
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head {
background-color: #137B77;
margin: 0;
padding: 0 25px;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
}
.main-header {
display: flex;
position: relative
}
.header-menus {
}
.header-menus ul {
list-style: none;
color: #000000;
display: flex;
justify-content: space-evenly;
padding-left: 0;
}
.header-menus li {
padding-left: 20px;
}
.header-menus li:first-child {
padding: 0;
}
.logo-image img {
max-width: 150px;
position: relative;
right: 75px
}
.header-menus ul li a {
color: #000000;
text-decoration: none;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.social {
background-color: blue;
}
.social-menu {
display: flex;
align-items: center;
}
</style>
<body>
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
</li>
<li>
Contato
</li>
<li>
Portfólio
</li>
<li>
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://www.simpleskincare.com/sk-eu/content/dam/brands/simple/global_use/1620325-new-logo-simple.png.rendition.680.680.png" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<link rel="stylesheet" type="text/css" href="photos/facebook.png">
f
</div>
</header>
</div>
</body>
An image of the resulting render with this code
FontAwesome class fix (the first class is usually not fa. fab is used for brands, fas for solid icons etc)
fa fa-facebook -> fab fa-facebook
added flex: 1 to nav menu & social menu
added flex: 3 to main header
When used with positive numbers, flex can split sections proportionally:
// 20% navigation 60% main 20% social
.head align-items: stretch rather than center (expands to fill height, rather than just staying same and being centered) [could also use align-self on .main-header]
// .main-header align-items: stretch so .logo-image expands
.logo-image - display:flex; in order to center the img
.logo-image{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
Center logo image, width/height: auto (keeps aspect ratio and expands), padding: 1em so there is some space around it
.logo-image img {
padding: 1em;
width: auto;
height: auto;
}
body{
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head{
background-color: #137B77;
margin: 0;
padding:0;
align-items: stretch;
display: flex;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
}
.main-header{
flex: 3;
display: flex;
align-items: stretch;
}
.header-menus{
flex: 1;
}
.header-menus ul li {
list-style: none;
margin-left: 10px;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.logo-image{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.logo-image img {
padding: 1em;
width: auto;
height: auto;
}
.social{
width: 100px;
height: 150px;
background-color: blue;
}
.social-menu{
flex: 1;
display: flex;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://picsum.photos/seed/picsum/400/100" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<a class="fab fa-facebook"></a>
<a class="fab fa-instagram"></a>
</div>
</header>
</div>
</body>
</html>
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed last year.
I am new to web development and I am trying to create a responsive navbar but float Property is Not Working. Here is the HTML Code
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
and here is the CSS code
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
I have tried all thing I think of like padding, Increasing logo width, etc. But it make it unresponsive on bigger screen
Solution 1: (Using Float)
Remove display: flex; from nav CSS and add float: left; on .logo CSS.
nav {
background: #000000;
color: white;
line-height: 76px;
}
.logo {
float: left;
}
Solution 2: (Using Flex)
Just add justify-content: space-between; in nav CSS.
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
I hope it'll help you out, Thank You
Add this to your nav style
justify-content: space-between;
add justify-content: space-between to nav styles
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
just add in nav css ( justify-content: space-between;)
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
I'm trying to build a blog web page in a HTML CSS tutorial and I can't find a way to make the navBar identical.
Here's the Navigation Bar:
I don't know how to separate the logo on the left to the group of icons on the right.
I tried to use Flex but I can't figure out how to use it properly.
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
If you have any advice or suggestions it would be great I'm starting and this is making me struggle a lot.
Thanks in advance guys!
You just have to use display: flex; align-items: center; with header style which will look like
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
and also need to add CSS in Nav style, which will look like
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
Complete code
header img{
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
body{
background-color: aliceblue;
}
header * {
display: inline;
}
header li{
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My blog</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<header>
<img src="https://assets.hongkiat.com/uploads/psd-text-svg/logo-example.jpg" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li><div id="circle"></div></li>
</ul>
</nav>
</header>
</body>
</html>
You can use display: flex on the header (vertical alignment via align-items as desired), and to move the logo and the navigation to the left and right, just add margin-left: auto to nav to move it as far right as its contents allow.
(margin-right: auto for the logo would accomplish the same result, BTW)
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
nav {
margin-left: auto;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
You can do it with Flex, give your main div the display: flex and justify-content: space-between so there will be a space between your logo and other nav-items and then align-items: center so every item will be in the same horizontally aligned.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
Css
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
display: flex;
justify-content: space-between;
align-items: center
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
I've been working on my portfolio and I came across this video where you hover the navigation links and they make an upward transition. YouTube Video
The css overflow method which I've applied according to the video that will remove duplicate navlinks (About me, Tools etc.) but this isn't working for me and I can't figure out why.
Relevant HTMl:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
<div class="space1">
<div class="centered-content nav-logo">Logo</div>
<div class="centered-content empty-space1">
<!--empty space-->
</div>
</div>
<div class="space2">
<div class="centered-content empty-space2">
<!--empty space-->
</div>
<div class="centered-content nav-links">
<ul class="centered-content">
<li>
<a href="">
<span>About Me</span>
<span>About Me</span>
</a>
</li>
<li>
<a href="">
<span> Contact</span>
<span> Contact</span>
</a>
</li>
<li>
<a href="">
<span>Blog</span>
<span>Blog</span>
</a>
</li>
<li>
<a href="">
<span>Projects</span>
<span>Projects</span>
</a>
</li>
<li>
<a href="">
<span>Tools</span>
<span>Tools</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="intro-container">
<div class="intro-para">
<h1>Greetings All!!</h1>
Intro-content</div>
<div class="centered-content intro-image">
the image goes
</div>
</div>
</body>
</html>
Relevant CSS:
/* ADDITION */
.centered-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* END */
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background-color:peachpuff;
font-family: roboto;
background-repeat: space;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
display: flex;
height: 10vh;
background-color: crimson;
}
.space1 {
justify-content: center;
align-items: center;
display: flex;
width: 50%;
}
.nav-logo {
display: flex;
width: 50%;
height: 100%;
}
.empty-space1 {
display: flex;
width: 50%;
height: 100%;
}
.space2 {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
align-items: center;
}
.empty-space2 {
display: flex;
width: 50%;
height: 100%;
}
.nav-links {
display: flex;
width: 50%;
height: 100%;
}
.nav-links ul {
display: inline-flex;
list-style: none;
/* REMOVED! */
/* height: 100%; */
}
.nav-links ul li{
position: relative;
}
.nav-links ul li a {
position: relative;
display: block;
justify-content: space-evenly;
text-decoration:none;
margin: 0 .4em;
color: black;
overflow: hidden;
letter-spacing: 2px;
}
.nav-links ul li a span{
display: flex;
width: 100%;
position: relative;
transition: 0.5s;
background-color: lightslategrey;
justify-content: center;
align-items: center;
transition: 0.5s;
flex-direction: column;
}
.nav-links ul li a:hover span{
}
.intro-container{
display: flex;
padding: .2% .3% 0 .3% ;
}
.intro-para{
background-color:salmon;
width: 50%;
}
.intro-image{
width: 50%;
background-color: lightskyblue;
}
Your element should have a height. You have not provided height or max-height attribute for the .nav-links ul li a selector as given in the Youtube video link you provided.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width">
<style>
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-rows: 1fr 15fr .5fr;
}
footer {
text-align: center;
font-size: 0.85em;
color: white;
background-color: black;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
}
nav {
position: sticky;
top: 0;
}
nav ul li:hover {
background-color: grey;
}
.brand-logo {
height: 100%;
}
.brand-logo img {
height: 100%;
}
#label {
font-size: 2rem;
font-family: Impact, Charcoal, sans-serif;
// text-align: center;
}
.inst {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
}
.nav-wrapper {
height: 100%;
background-color: black;
text-align: center;
}
::selection {
border: black;
color: #000;
}
ul.dropdown-content.select-dropdown li span {
color: #000;
}
#cartIcon {
position: relative;
text-align : center;
left: 10px;
}
#cartIconNav {
position: relative;
margin-right: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo"><img id="logo"
src="https://i.imgur.com/KNOffUU.png"></a>
</div>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul class="center hide-on-med-and-down">
<li>Home</li>
<li>Estimator</li>
<li>About</li>
<li id="cart"></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="items">
<li>Home</li>
<li>Estimator</li>
<li>About</li>
<li id="navCart"></li>
</ul>
</header>
I'm trying to have my logo centered and the other line also have my menu centered.When trying to center the logo it goes more to the left and my menu items only aligns to the right or left.
ul class="center hide-on-med-and-down"
The line above only seems to align the menu to the right or left even if
center is typed.
Any suggestion on how I can achieve this and where am I going wrong in trying to solve this
Edit: new styles are done mainly using display: flex;
Check my commented jsfiddle
Main things I changed
.nav-wrapper {display: flex; flex-direction: column;}
/* Align the inner items with flex
specify that we want them flowing in a single column */
/* Justify content has lots of options for positioning children */
nav ul {
display: flex;
justify-content: center;
}
nav ul li {
/* Make the li float left, positions them horizontally rather than vertically */
float: left;
color: white;
width: 100%;
/* Give a max-width to make the nav buttons smaller */
max-width: 5rem;
padding: 0.8rem 0;
}
I want to make the navbar centered like the 'my content'
please help me to get deal with this. I wanna make the navbar in the center. like the 'my content' used to. But in fact, it literally not center.
Plus correct my design. Like at padding, margin, border, etc
body {
margin: 0;
padding: 0;
}
.logo {
width: auto;
height: 100px;
}
.container {
width: 720px;
height: auto;
margin: auto;
}
.navbar ul {
padding: 0;
text-align: center;
}
.navbar ul li {
padding: 20px;
display: inline-block;
width: auto;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
padding: 10px 20px;
width: auto;
border: 1px solid black;
border-radius: 25px;
}
.navbar ul li a:hover {
border: 1px dashed #2a19c0;
border-radius: 25px;
background-color: rgb(68, 99, 236);
color: white;
}
.content {
height: 700px;
background-color: #9360b6;
}
.content h4 {
text-align: center;
width: auto;
padding: 12px;
text-transform: uppercase;
text-decoration: underline;
}
.footer {
background-color: #9360b6;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Latihan Layout intermediate</title>
<link rel="stylesheet" href = "Coffee.css">
</head>
<body>
<div class="container">
<img src="../image/logo.png" class="logo" alt="logo">
<div class="navbar">
<ul>
<li><a>home</a></li>
<li><a>price list</a></li>
<li><a>about us</a></li>
</ul>
</div>
<div class="content">
<h4>My content</h4>
</div>
<div class="footer">
<p>Copyright 2020 Alan's web</p>
</div>
</div>
</body>
You Can wrap your logo with a container then center your logo using the display: flex; & justify-content: center;
HTML:
<div class="logo-container">
<img src="../image/logo.png" class="logo" alt="logo">
</div>
CSS:
.logo-container{
display: flex;
justify-content: center;
}