I am having trouble aligning two items together in my navbar. I am trying to bring logo on left and align tabs on right.
I have created lis for links and simple h1 for logos.
The trouble I am having is that h1 is taking all of space and pushing lis down to next line, I have tried doing several things but can't really figure it out where I am going wrong.
body {
margin: auto
}
/*navbar*/
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
float: right;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
You shouldn't use floats when working with Flexbox. Flexbox takes care of aligning your items the way you want. If you want two columns on the same row, add display:flex on the parent. If you want one on the left and one on the right, use justify-content: space-between;
body {
margin: auto
}
/*navbar*/
.navbar {
display: flex;
justify-content: space-between;
}
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
In order to understand Flexbox, there is a game that will teach you all the necessary properties in an easy way. This visual guide will also help you.
#Hanan: no need of using float just need to ad add display: flex and justify-content: space-betweenin navbar
body {
margin: auto
}
/*navbar*/
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
/* float: right; */remove
}
.navbar {
display: flex;
justify-content: space-between;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
Flexbox is the easiest way. For the h1 set flex: 1 auto. This will make it grow to fill the remaining space. All navigation links will just consume the needed space. It's also working when wrapping the links into another element like ul/li
.navbar {
display: flex;
align-items: center;
width: 100%;
}
.navbar h1 {
flex: 1 auto;
}
.navbar a {
padding: 0 0.5em;
}
<header>
<nav class="navbar">
<h1>My Site</h1>
Link 1
Link 2
Link 3
Link 4
</nav>
</header>
please try to change your code to bellow.
body {
margin: auto
}
/*navbar*/
.navbar {
display: flex;
justify-content: space-around;
}
.main-nav {
list-style: none;
font-size: 0.7em;
}
li {
padding: 20px;
float: left;
}
a {
color: black;
text-decoration: none;
}
Related
I want to place the text nearby the logo but justify-content: center; is making it more difficult, how can I move the text closer to the logo without having to use position: left/right ?
Using css-position will affect the responsiveness in the future ?
body {
background: #19111d;
}
header {
background: #8761b3;
display: flex;
align-items: center;
justify-content: space-between;
}
img {
width: 100px;
}
p {
font-size: 30px;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
padding: 0px 20px;
}
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<img alt="logo" src="logo.png">
<p>Random Text</p>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
</body>
</html>
You can just remove the justify-content and add a margin-left: auto to the nav instead (to make it right aligned). That should make the text right next to the logo.
If you need to add some space between the logo and the text, just add a margin-right to the logo and add the space you need.
body {
background: #19111d;
}
header {
background: #8761b3;
display: flex;
align-items: center;
/* Removed justify-content */
}
img {
width: 100px;
/* add margin-right to set distance between logo and text */
}
p {
font-size: 30px;
}
/* Adding this will make the navigation right aligned */
nav {
margin-left: auto;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
padding: 0px 20px;
}
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<img alt="logo" src="logo.png">
<p>Random Text</p>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
</body>
</html>
.header-left {
display:flex;
align-items: center;
};
img {
width: 100px;
}
body {
background: #19111d;
}
header {
background: #8761b3;
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
padding: 0px 20px;
}
<header>
<div class="header-left">
<img alt="logo" src="logo.png">
<p>Random Text</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
I've been learning code only for a couple of weeks, so I have a very basic knowledge.
I got stuck trying to build a navbar using flexbox.
For some reason I can't get my nav buttons () to stand in a horizontal way.
I've been trying and rewritting my code, but I can't figure it out.
Here's the link to my code: https://codepen.io/kokazp/pen/xxORovj?editors=1100
Thanks in advance.
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
background-color: lightGray;
}
navbar {
background: white;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
#header-img{
height: 70px;
width: 70px;
margin-right: auto;
margin-left: 10px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li, a{
background-color:white;
text-decoration: none;
padding: 8px;
color:black;
}
li a:hover{
background-color: black;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght#300&display=swap" rel="stylesheet">
<link rel=StyleSheet HREF="estilo.css">
</head>
<body>
<header id="header">
<navbar id="nav-bar">
<ul>
<li><img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2017/craft-brewery-logos/1.jpg" id="header-img" alt="Company logo"></li>
<li>Contact</li>
<li>Beers</li>
<li>Video</li>
</ul>
</navbar>
</header>
</body>
</html>
let's make it clear when you use a flex-box it applies to children not to grand children, when you apply display:flex to ur navbar it will make the ul a flex child, so li tags are not flex, secondly you're making it columns so it will make it in a vertical way.
solution: you can make the ul
ul{display:flex;}
and it will make the li go to row direction by default
Here is the code I tried to make nav bars with. I have troubles to get familylink at the left then the population in the middle and the contact in the right. I tried to add and remove padding but I cannot find a way.
.buttons {
background-color: #0d3c4b;
border: none;
color: white;
padding: 15px 32px;
padding-left: 674px;
padding-right: 467px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.navbar {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Welcome</title>
<div class="navebar">
<ul class="buttons">
<li style="display:inline-block;" classe="family">
The Family</li>
<li style="display:inline-block;">
Population</li>
<li style="display:inline-block;">
Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
I'm looking it to make it more presentable.
Your css missing family class and in html you have classe instead of class="family"
Also <div class="navebar"> should be <div class="navbar">
The spelling of the class navbar in your HTML is wrong, you can change it to navbar from navebar and then for the css use padding: 0;
And for the links
#royal { display: flex; justify-content: flex-start; }
#population { display: flex; justify-content: center; }
#contact { display: flex; justify-content: flex-end; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Welcome</title>
<div class="navbar">
<ul class="buttons">
<li style="display:inline-block;" classe="family">
The Family</li>
<li style="display:inline-block;">
Population</li>
<li style="display:inline-block;">
Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
i modified navbar but i can still not find a way to turn buttons as here
Try using a display: flex;
here is brief tutorial
you should use
flex-wrap: nowrap;
for the row to not be for two lines according your previous inline-block styling
and
order: 1-3;
for positioning elements from 1 that is far left to 3 that is all the way to the right
Start with assigning li id so you can do styling for each element
and then assign order 1, 2, 3 for them.
.navebar{
display: flex;
}
#family{
order: 1;
width: 100%;
}
#population{
order: 2;
width: 100%;
}
#contact{
order: 3;
}
<div class="navebar">
<div id="family" >
The Family</div>
<div id="population">
Population</div>
<div id="contact">
Contact</div>
</div>
I'm working on a school project that has several limitations: CSS only (No JS) & a rigid delineation of sections. The idea is as follows:
top left header w/ image top right navbar
header border bottom covering width of page
I have successfully pushed the navbar to its correct position at the top right of the page
Unfortunately, this has cut off the border-bottom spanning the width of the page and no amount of jerking it around has allowed me to keep both.
Code:
header {
border-bottom: 2px solid blue;
padding-top: 12px;
position: absolute;
}
body {
background-color: white;
}
nav {
float:right;
position: relative;
text-align: right;
list-style: none;
}
nav li {
display: inline;
padding: 10px;
}
#container {
background-color: white;
width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Final Project v2</title>
<link rel="stylesheet" href=style.css />
</head>
<body>
<header>
<img src="img/logo.gif" alt="Logo">
</header>
<nav role="navigation">
<ul class="nav-main">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
</div>
</body>
</html>
There must be something exceedingly obvious I'm missing and I'm losing my mind. Any suggestions?
Just Wrap the logo and nav on the header, and change the header to use flex.
Fixed code
header {
border-bottom: 2px solid blue;
padding-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
body {
background-color: white;
}
nav {
list-style: none;
}
nav li {
display: inline;
padding: 10px;
}
#container {
background-color: white;
width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Final Project v2</title>
<link rel="stylesheet" href=style.css />
</head>
<body>
<header>
<img src="img/logo.gif" alt="Logo">
<nav role="navigation">
<ul class="nav-main">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="container">
</div>
</body>
</html>
Your <header> tag (with bottom border) needs to enclose both the logo and the nav.
It's more efficient to use the flexbox model than floats and to avoid using position: absolute where possible.
header {
display: flex;
justify-content: space-between;
border-bottom: 2px solid blue;
}
Here's a working fiddle that will get you on track.
I have a nav bar which i cannot centre horizontally. I have a nav tag with a ul tag inside and li tags inside that then some of the li tags have ul's and li's to create dropdown lists.
I cannot get the nav to be centered in the page??
/* Main Header Menu */
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
float: left;
position: relative;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
</html>
Please point out anything that might help with my problem, and an explanation would be awesome to as i am trying to learn the reason why as well as just moving/centering the element.
thanks
James
edit:
Changed code to only display the issue i am asking about.
Remove float: left;
.headermenu>ul>li {
position: relative;
display: inline-block;
}
Since you are already using display: inline-block, it is not needed and leads to your problem. For a detailed explantion on both display: inline-block and float and the difference between them, see this answer for reference: Advantages of using display:inline-block vs float:left in CSS
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
Try this
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
padding: 0 10px;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
Your nav is already centered. But if you want to center your middle ul element you should set every ul's width to 33% and set middle ul text align to center.