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;
}
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 am learning web development and for my first project am trying to make a portfolio site. However, I am having issue with the dropdown section for one of my menus. I attached a :hover pseudo-class to my dropdownhover div so it knows when to open the dropdown menu. However, it doesnt seem to be changing the dropdownnav class at all on line 67. I tried switching the psuedo-class to only change itself and it works fine but when I try to change a sibling class it doesnt work. I am assuming I messed up my combinators?
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital#1&display=swap');
* {
margin: 0;
z-index: 0;
}
body {
background-color: #EF2F88;
}
.navbar {
background-color: #8843F2;
margin: 0
}
.navlist {
margin-right: 0;
margin-left: 40%;
height: 7rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
.navlist li {
height: 100%;
text-align: center;
flex: 1;
position: relative;
}
.navlist li a {
text-decoration: none;
color: white;
font-family: Source Code Pro;
font-size: 2.5rem;
top: 2rem;
position: relative;
}
.dropdownnav {
background-color: #8843F2;
margin-top: 3rem;
height: 8rem;
opacity: 0;
}
.dropdownlist {
justify-content: space-between;
display: flex;
gap: 1rem;
flex-direction: column;
list-style: none;
}
.dropdownlist li {
text-align: left;
}
.dropdownlist li a {
font-size: 1.5rem;
}
.dropdownhover:hover + .dropdownnav {
opacity: 1;
}
.dropdownhover {
position: absolute;
top: 0;
height: 15rem;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css"></link>
<title>Portfolio</title>
</head>
<body>
<!--NAV BAR SECTION-->
<nav class="navbar">
<ul class="navlist">
<li id="about">
About Me
</li">
<li id="projects">
Projects
<nav class="dropdownnav">
<ul class="dropdownlist">
<li class="mania">
Clicking Mania
</li>
<li class="bloopville">
Bloopville
</li>
</ul>
</nav>
<div class="dropdownhover"></div>
</li">
<li id="skills">
Skills
</li">
<li id="contact">
Contact
</li">
</ul>
</nav>
</body>
</html>
.dropdownhover:hover + .dropdownnav:hover {
opacity: 1;
}
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>
I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don't know how I can do that ...any help would be appreciated...here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana;
}
html, body {
height: 100%;
}
.container1 {
min-height: 100%;
}
.main {
overflow: auto;
padding-bottom: 50px;
}
div.footer>a {
text-decoration: none;
color: red;
}
div.footer {
background-color: black;
color: white;
position: relative;
height: 50px;
margin-top: -50px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li a {
text-decoration: none;
background-color: black;
color: white;
font-size: 17px;
margin: 20px;
}
nav ul li {
list-style: none;
}
nav ul.navbar {
display: flex;
justify-content: center;
}
<!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>Home</title>
<link rel='stylesheet' href='../Css/styles.css' </head>
<body>
<nav>
<span><label id='logo'>Logo</label></span>
<ul class='navbar'>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
<div class='container1'>
<div class='main'>
</div>
</div>
<div class='footer'>
Created by <a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ?
view_as=subscriber' target='_blank'>Precious Nyaupane</a>|© 2020 All rights reserved
</div>
</body>
</html>
Displaying nav as flex should do the trick
nav {
display: flex;
}
Demo
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.