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.
Related
I'm really new to this whole CSS and HTML and i'm trying to make a simple navbar with what I have learned.
The problem is, I have the navbar items centered and I was happy with it. Then I decided to add this hover option so the background color of each item would change when hovering on it.
The issue is I cannot change the height or alignment of the boxes.
weird box
#header {
background: #9842f5;
position: fixed;
width: 100%;
padding: 20px 0;
text-align: center;
}
nav ul {
font-family: Arial;
display: inline;
text-align: center;
margin: 0 20px;
}
nav ul:hover {
background: blue;
height: 20px important;
}
nav li {
display: inline;
opacity: 0.78;
text-align: center;
}
<nav id="header">
<ul>
<li>Home</li>
</ul>
<ul>
<li>Contact Info</li>
</ul>
<ul>
<li>NUKE</li>
</ul>
</nav>
The hover effect should be added to the list-items (<li>). To get more space, you can add padding instead of changing the height.
Also, only add one <ul> instead of 3.
#header {
background: #9842f5;
position: fixed;
width: 100%;
padding: 20px 0;
text-align: center;
}
nav ul {
font-family: Arial;
display: inline;
text-align: center;
margin: 0 20px;
}
nav li:hover{
background: blue;
}
nav li {
display: inline;
opacity: 0.78;
text-align: center;
padding: 20px;
}
<nav id="header">
<ul>
<li>Home</li>
<li>Contact Info</li>
<li>NUKE</li>
</ul>
</nav>
I am trying to replicate apple.com's navbar. But i ran into a problem with having the list spread way far out than the actual website. I was wondering what is causing this? I tried margin/padding for the list and this is the best i can come up with.
If I didn't make any sense above, to summarize I just want the list in the center and not spread apart as much.
/* real active css */
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.nav {
height: 40px;
}
.nav .navbar {
background: #1d1d1f;
position: fixed;
width: 100%;
z-index: 1000;
display: block;
}
.nav .navbar ul {
background: #1d1d1f;
width: 100%;
height: 10px;
display: flex;
align-items: center;
padding-left: 50px;
}
.nav .navbar ul li {
list-style: none;
margin: 0em 10em 0em 0em;
}
.nav .navbar ul li,
.navbar ul li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
<nav class="nav">
<div class="navbar">
<ul>
<li>
<img src="Images/apple.svg">
</li>
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
<li>
<img src="Images/search.svg">
</li>
<li>
<img src="Images/bag.svg">
</li>
</ul>
</div>
</nav>
You need to set max-width on your .nav ul - Also you should use justify-content: space-evenly to space them out properly on the list instead of using of margins.
In addition we need to set margin to 0 auto in nav > ul so that it stays in the center and responsive the browser as well. I have fixed up your CSS and is working as expected.
Working Demo: (Run snippet below and click full page to see the results)
/* real active css */
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.nav {
height: 40px;
}
.nav .navbar {
background: #1d1d1f;
position: fixed;
width: 100%;
z-index: 1000;
display: block;
}
.nav .navbar ul {
background: #1d1d1f;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
max-width: 1100px;
margin: 0 auto;
padding: 1.2em;
}
.nav .navbar ul li {
list-style: none;
}
.nav .navbar ul li,
.navbar ul li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
<nav class="nav">
<div class="navbar">
<ul>
<li>
<img src="Images/apple.svg">
</li>
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
<li>
<img src="Images/search.svg">
</li>
<li>
<img src="Images/bag.svg">
</li>
</ul>
</div>
</nav>
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>
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'd want to make the header to my web page where the logo would be on the left hand side and the horizontal navigation bar on the right hand side.
The problem is that whenever I shrink the browser window the navigation bar goes below the border of the header container, thus violating the page's structure.
Like this:
Are there any solutions? I can only think of making the parent container Header accommodate its height to the child containers, but I don't know how to implement that. Or should I use the media queries somehow?
I wrote the following code.
header {
height: 100px;
background-color: gray;
background-image: url('img/background.gif');
}
#logo {
float: left;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<header>
<img id="logo" src="images/logo.png">
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>Blog
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
You may use the flex model or min-height + overflow to deal with floatting elements. You can also use both together, float properties will be overidden by flex where supported. ,
header {
min-height: 100px;
background-color: gray;
background-image: url('img/background.gif');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
overflow:hidden; /* for float if flex not supported */
}
#logo {
float: left;
/* to deal with flex */
flex-shrink:0;
margin:auto;/* or 0 or auto auto auto 0 or ... */
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<header>
<img id="logo" src="http://dummyimage.com/140x45&text=logo.png">
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>Blog
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
Try having your li display "inline-block"? I think you'd have to take the block setting off "li a".
Then you may have to give a set width to the ul itself so that it does shrink with the page or use media queries.
I hope this helps :)