I am trying to create a navigation menu with 6 items, 3 on the left, 3 on the right with the logo (the logo to be both vertically and horizontally centered)
The problem I am having is the logo looks centered, but not vertically. Also the navigation items are too far apart from the logo and the my navigation items on the right are not in the correct order.
What I am trying to accomplish is to make it look like the screenshots attached.
https://jsfiddle.net/fa970mnm/2/
.site-footer ul {
list-style: none;
}
.site-footer ul li a {
color: #e1c66b;
}
#logo {
height: 125px;
}
.nav {
text-align: center;
}
.nav li {
display: inline;
margin-right: 1em;
}
#media(min-width:786px) {
.nav li:nth-child(1),
.nav li:nth-child(2),
li:nth-child(3) {
float: left;
}
.nav li:nth-child(4),
.nav li:nth-child(5),
li:nth-child(6) {
float: right;
}
}
<div style="text-align:center;">
<img id="logo" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/logo.png" />
<ul class="nav">
<li>Home</li>
<li>Shop</li>
<li>Our Story</li>
<li>Products</li>
<li>Contact Us</li>
<li>Foundation</li>
</ul>
</div>
You would probably be best suited using a flexbox in this situation. You can simply use the following rules for your container <div>.
#banner {
display: flex;
justify-content: center;
align-items: center;
}
And you can mess with the margin-right rule for the .element class I added to change the amount of spacing, or maybe take a look at justify-content: space-between from the link above.
Here's the JSFiddle.
Why do not you just put the logo between LI?
Just move the logo and improve CSS:
.nav li {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
Display as 'Inline-block', because 'vertical-align middle' doesnt work with 'inline'.
https://jsfiddle.net/fa970mnm/14/
First move your logo to .nav as a child.
Then change .nav li inline to display: inline-block;.
Like this
.nav li {
display: inline-block;
margin-right: 1em;
}
Here is the working Snippet
.site-footer ul {
list-style: none;
}
.site-footer ul li a {
color: #e1c66b;
}
#logo {
height: 125px;
}
.nav {
text-align: center;
vertical-align: middle;
}
.nav li {
display: inline-block;
margin-right: 1em;
vertical-align: middle;
}
<div style="text-align:center;">
<ul class="nav">
<li>Home</li>
<li>Shop</li>
<li>Our Story</li>
<li>
<img id="logo" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/logo.png" />
</li>
<li>Products</li>
<li>Contact Us</li>
<li>Foundation</li>
</ul>
</div>
Related
so my issue is that my navbar wont display in the center of the screen (horizontally) and I dont understand why, this is something I have regular issues with so if you could help it would be greatly appreciated. Heres a link to the code
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
#logo {
display: block;
margin: 0 auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}
<body>
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>About The Rally</li>
<li>Our Car</li>
<li>Charities</li>
<li>Sponsors</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Ideally you should have some header css to center it's contents, then you could align the nav li s any which way you want. I created a fiddle (same as snippet) to demonstrate, and added padding to the li elements (or else they'd have been all squished together)
Hope this helps.
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
header {
display: block;
margin: 0 auto max-height: 20em;
}
#logo {
display: block;
margin:auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
padding-right: 7px;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>
Home</li>
<li>
About Us</li>
<li>
About The Rally</li>
<li>
Our Car</li>
<li>
Charities</li>
<li>
Sponsors</li>
<li>
Contact Us</li>
</ul>
</nav>
</header>
Change
nav li {
float: left;
display: inline-block;
}
to
nav li {
// Remove float
display: inline-block;
}
Add a wrapper to the nav using a div tag, make the nav display inline and use text-align on the div.
<div style="text-align:center"><nav style="display:inline-block">
... and then google Bootstrap
After removing the float: left you can use display: flex for <ul> or display: inline for it's children <li>s.
And you have an unwanted left padding in the <ul> that it is better to remove it to make real center.
ul { margin: 0; padding: 0; }
You can have a look at this post.
I have a problem with centering my nav menu. I want to my logo be perfectly centered on website and links to be around it inline. When I center my whole menu, indeed it's centered, but my image isn't in the center of a website.
Is there a solution to center my navigation menu by the logo?
<header>
<div class="nav-desktop">
<nav>
<ul>
<li>Services</li>
<li>Portfolio</li>
<li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
<li>Awards</li>
<li>Team</li>
</ul>
</nav>
</div>
</header>
header
{
background: #3f3f3f;
}
.nav-desktop
{
width: 100%;
position: relative;
padding-top: 30px;
}
.nav-desktop ul
{
list-style-type: none;
display: inline-block;
}
.nav-desktop ul li
{
display: inline-block;
}
.nav-desktop ul li img
{
vertical-align: middle;
}
And here's my jsfiddle https://jsfiddle.net/brq8f7nz/1/
Thanks for help!
The best way I know of achieving this is to set the same width attribute to all your <li> elements, except the one holding the image:
<li class="menuli">Services</li>
<li class="menuli">Portfolio</li>
<li><img src="....."></li>
<li class="menuli">Awards</li>
<li class="menuli">Team</li>
in the CSS:
.menuli
{
width:300px;
text-align:center;
}
only add nav style and remove padding-top: 30px; in .nav-desktop class
nav{
text-align:center;
}
Revise Fiddle
header {
background: #3f3f3f;
}
nav {
text-align: center;
}
.nav-desktop {
width: 100%;
position: relative;
}
.nav-desktop ul {
list-style-type: none;
display: inline-block;
}
.nav-desktop ul li {
display: inline-block;
}
.nav-desktop ul li img {
vertical-align: middle;
}
<header>
<div class="nav-desktop">
<nav>
<ul>
<li>Services</li>
<li>Portfolio</li>
<li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
<li>Awards</li>
<li>Team</li>
</ul>
</nav>
</div>
</header>
I got it... my ul just got left padding and it was a reason why my logo wasn't in the center but more to the right.
Thanks guys!
I searched Stack overflow and google and tried all the suggestions to getting my h1 and nav on the same line. I tried inline, inline-block, setting the header itself to 100%. It's just not aligning. On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning. here's my code
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
float: left;
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav li{
float: right;
display: inline-block;
color: #ffffff;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2
<p>Today's Try It Recipe!<p>
</div>
</div>
display: flex; justify-content: space-between; will put them on the same line and separate them with the available space.
.header {
background-color: #00001a;
padding: 0 1em;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
}
.header h1 {
color: #ffffff;
font-size: 15px;
}
.nav li {
color: #ffffff;
display: inline-block;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
Put the heading and the navigation in their own containers. Float one left, the other right, and make sure to clear them afterwards.
header {
background-color: #00001a;
padding: 0px 10px;
box-sizing: border-box;
}
h1 {
color: white;
margin: 5px 0;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
color: white;
margin-left: 20px;
}
<header>
<div class="left">
<h1>
EaTogether
</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</div>
<div class="clear"></div>
</header>
Note: I've changed "Togeter" to "Together", assuming it was a typo.
I am not sure if you want this thing but I just gave a try,
For this, set float:right to ul element and not on li elements.
Since you want to align h1 and li content set line-height to 0.5 for ul element
please check this fiddle: https://jsfiddle.net/hz0104mp/
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</div>
</div>
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav ul{
float:right;
line-height:0.5;
}
.nav li{
display: inline-block;
color: #ffffff;
}
I like the flexbox method mentioned by #Michael Coker but here's a solution using floats as the OP attempted to do.
You were on the right track but might have been applying some of your CSS to the wrong elements for the wrong reasons.
On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning.
The reasons for this are not obvious until you break things down. The reason this happens is because float: right is applied to each element separately and in the order they appear in the markup, not as a whole. The browser will float Home as far to the right as it can. After that, it will move About as far to the right as it can. Rinse and repeat for any other li.
I rectified this by floating the ul instead of individual li and setting those to display: inline;. Floating the li to the left would also work.
header {
padding: 0 0.5rem;
height: 40px;
color: #ffffff;
background-color: #00001a;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header h1 {
margin: 0;
font-size: 15px;
display: inline-block;
}
header h1,
.nav li {
line-height: 40px;
}
.nav {
float: right;
}
.nav li {
padding: 0 0 0 0.25rem;
display: inline;
}
<header>
<h1>Eat Together</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</header>
<main>
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</main>
Please note that I took a few liberties with your markup to help provide an example of how it can be more semantic and achieved with less markup (along with a few choice styles to make it a little more "pretty").
I want a horizontal navbar with 3 items: one left, one center, and one right. But I cannot seem to get float: to work for me. The attached picture shows how the items do not line up horizontally. I want the centered item to really be a page title, not a link.
The clear: I have used seems to at least center the middle item, but without the clear: there is no symmetry. How can I get all 3 items to be positioned horizontally?
<ul>
<li style="float:left">Home</li>
<li style="clear:both;float:none">News</li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
Flexbox does this pretty simply.
Assuming your markup:
<ul>
<li>Home</li>
<li>News</li>
<li><a class="active" href="#about">About</a></li>
</ul>
The css will then be:
ul {
display: flex;
justify-content: space-between;
align-items: center;
}
Do remember to add the necessary vendor prefixes for cross-browser compatibility.
You're close! You just need to set text-align: center; on the parent to center the middle element, then float the first element left and last one right.
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
li:nth-child(1) {
float: left;
}
li:nth-child(3) {
float: right;
}
<ul>
<li>Home</li><li>News</li><li><a class="active" href="#about">About</a></li>
</ul>
You can also have them all take up the same amount of space and use text-align to position the text left/right/center.
ul { padding: 0; }
li {
width: 33.33%;
display: inline-block;
text-align: center;
}
li:nth-child(1) {
text-align: left;
}
li:nth-child(3) {
text-align: right;
}
<ul>
<li>Home</li><li>News</li><li><a class="active" href="#about">About</a></li>
</ul>
In this issue, you should read this blog to figure out how to make element horizontal in correct.
In your case, there has servals way to achieve it, I will put them on this answer.
ul {
padding: 0;
}
li {
list-style: none;
}
.first li {
float: left;
width: 50px;
}
.first .news {
width: 100%;
text-align: center;
margin-left: -50px;
margin-right: -50px;
}
.first li + li + li {
float: right;
}
.second li {
display: inline-block;
float: left;
width: 33%;
}
.second .news {
text-align: center;
}
.second li + li + li {
text-align: right;
width: 34%;
}
.third {
position: relative;
}
.third li {
position: absolute;
}
.third .news {
width: 100%;
text-align: center;
}
.third li + li + li {
position: absolute;
right: 0;
top: 0;
}
<h4>1.The key is 'margin-left' nagative value to expand space to text center is right.</h4>
<ul class="first">
<li>home</li>
<li class="news">news</li>
<li>about</li>
</ul>
<br>
<h4>2.The key is make 'li' elements have average width and use text align to achieve it, but there is 1% error, but it's too tiny on sight</h4>
<ul class="second">
<li>home</li>
<li class="news">news</li>
<li>about</li>
</ul>
<h4>3. This situation is easy to understand.</h4>
<ul class="third">
<li>home</li>
<li class="news">news</li>
<li>about</li>
</ul>
Try displaying the li inline
<li style="display:inline">
I know that when you put float: right to a li element it displays in a reversed order, but how can I fix the order so it displays "correctly" and on the right side of the website? Now it displays in the left side of the website. I've tried to read some old questions but didn't find anything that could help me, and also, how can I make the header display in the middle of the #333333 colored header without padding? Will auto element work?
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
.upper_header ul {
margin: 0px;
float: right;
}
.upper_header li {
display: table-cell;
vertical-align: middle;
float: left;
}
.upper_header a {
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
I've tried putting float: right to the ul element and float: left to the li element, then the order is correct but the position of it is in the left. (Sorry for putting two questions in one thread, didn't want to wait another 30 minutes to submit another question.)
You can set your LI's to display: inline-block then you dont need to use floats.
Inline-block elements then can be aligned using text-align
Note:
Inline-block can cause a space between elements, for more info about then please read this https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.header {
background-color: #333333;
width: 100%;
text-align: right;
}
.upper_header {
width: 100%;
}
.upper_header li {
display: inline-block
}
.upper_header a {
padding: 5px 10px;
display: block;
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
First - you have some mistakes in your code, in CSS you use .upper_header ul, but this is not correct syntax in your context. Right is ul.upper_header (your ul list is not under class upper_header, but on the same level), so it does not have effect for you.
If you don't need so much nested div and not so much classes, prevent using it. Example is below (this is solution with centered menu):
.header ul {
text-align: center;
list-style: none;
}
.header li {
display: inline-block;
}
http://jsfiddle.net/aqhesrjn/4/
Then you can easily play with text-align: right in ul element
.header ul {
text-align: right;
list-style: none;
}
.header li {
display: inline-block;
}
http://jsfiddle.net/aqhesrjn/3/
slightly modified CSS & you are using wrong selector(.upper_header ul)instead of ul.upper_header.
ul.upper_header ==> center to align center
ul.upper_header ==> right to align right
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
ul.upper_header {
margin: 0px;
text-align: center;
}
.upper_header li {
display: inline-block;
}
.upper_header a {
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
you can do this as well ,one of the many options available depending upon ofcourse what you are trying to get as an end result.and you were using that upper_header class in a wrong way,you dont even need that.
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
.headerContainer{width:30%;
float:right;}
.headerContainer ul li {
display:inline;
}
.headerContainer ul li a {
text-decoration: none;
color: #fff;
}