This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 8 months ago.
Currently I'm making navbar for my website, but have this issue: I need logo to be on the left and links on the right. I tried to find some solutions for this, but didn't find any. I'm using nav element and float didn't worked.
Here is my code:
* {margin: 0;}
nav {
overflow: hidden;
display: flex;
padding: 20px 15px;
color: #344E41;
align-items: center;
justify-content: right;
background: aqua;
}
nav a {
color: #344E41;
text-decoration: none;
margin: 0px 20px;
transition: 0.5s;
}
nav a:hover {
opacity: 75%;
}
<nav>
<img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
<a id="nav_a" href="#link1">link1</a>
<a id="nav_a" href="#link2">link2</a>
</nav>
You can simply add margin-right: auto to the img, and it would do the job, like so:
* {margin: 0;}
nav {
overflow: hidden;
display: flex;
padding: 20px 15px;
color: #344E41;
align-items: center;
background: aqua;
gap:20px;
}
nav a {
color: #344E41;
text-decoration: none;
transition: 0.5s;
}
nav img{
margin-right:auto;
}
nav a:hover {
opacity: 75%;
}
<nav>
<img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
<a id="nav_a" href="#link1">link1</a>
<a id="nav_a" href="#link2">link2</a>
</nav>
You can put logo in a <div> and the links in another <div> and then use text-align:left; and width:1300px; to image div so the logo will go to the left.
* {margin: 0;}
nav {
overflow: hidden;
display: flex;
padding: 20px 15px;
color: #344E41;
align-items: center;
justify-content: right;
background: aqua;
}
nav a {
color: #344E41;
text-decoration: none;
margin: 0px 20px;
transition: 0.5s;
}
nav a:hover {
opacity: 75%;
}
#img {
text-align: left;
width: 1300px;
}
.img {
text-align: left;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div id="img">
<img class="img" src="https://i.stack.imgur.com/oqbjv.png" height="50px">
</div>
<div>
<a id="nav_a" href="#link1">link1</a>
<a id="nav_a" href="#link2">link2</a>
</div>
</nav>
</body>
</html>
Since you are using flexbox, you can set the direction of the elements. Adding to your nav CSS the property:
flex-direction: row;
This should display the elements horizontally to the right.
Related
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<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>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<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>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
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 aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
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;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 years ago.
i want to center the content of "header", i can't figure out why it's left and not centered.
Should i make the image part of the ?
i tried text-align: center; but it doesn't work.
........................................................................................................................................................
header{
display: flex;
align-items: center;
}
.logo{
width: 300px;
height: 170px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;
color: black;
}
li{
display: inline;
margin: 20px;
padding-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="home.css" rel="stylesheet" type="text/css">
<title>I.S.R.F.</title>
</head>
<body>
<header>
<ul class="left">
<li>HOME</li>
<li>ALBO</li>
</ul>
<img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
<ul>
<li>L'ISTITUTO</li>
<li>CONTATTI</li>
</ul>
</header>
</body>
</html>
Add justify-content: center to your .header and that should centered. Read more about the box model and flexbox
header{
display: flex;
align-items: center;
justify-content: center;
}
.logo{
width: 300px;
height: 170px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;
color: black;
}
li{
display: inline;
margin: 20px;
padding-top: 40px;
}
<header>
<ul class="left">
<li>HOME</li>
<li>ALBO</li>
</ul>
<img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
<ul>
<li>L'ISTITUTO</li>
<li>CONTATTI</li>
</ul>
</header>
Add in header : justify-content: center
header{
display: flex;
align-items: center;
justify-content: center
}
.logo{
width: 300px;
height: 170px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;
color: black;
}
li{
display: inline;
margin: 20px;
padding-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="home.css" rel="stylesheet" type="text/css">
<title>I.S.R.F.</title>
</head>
<body>
<header>
<ul class="left">
<li>HOME</li>
<li>ALBO</li>
</ul>
<img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
<ul>
<li>L'ISTITUTO</li>
<li>CONTATTI</li>
</ul>
</header>
</body>
</html>