So I made a navigation bar and a section lists and I successfully done it but the only problem is that the lists are not spaced. How do I fix this?
How the Page looks like
header {
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
background: white;
box-shadow: 0 32px 55px rgba(0, 0, 0, 0.5);
z-index: 999;
}
header nav {
float: none;
margin: 30px;
}
header nav ul li {
display: inline-block;
}
header nav ul li a {
font-size: 16px;
}
<header>
<nav id="nav-main">
<ul>
<li>Home</li>
<li>Elektro One</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</header>
If you want to display evenly across the navbar and be responsive with screen then try using:
<ul id="even-space">
<li>..</li>
..
</ul>
and css
#even-space {
display: flex;
justify-content: space-between;
}
just add margin for li tags like following:
header {
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
background: white;
box-shadow: 0 32px 55px rgba(0, 0, 0, 0.5);
z-index: 999;
}
header nav {
float: none;
margin: 30px;
}
header nav ul li {
display: inline-block;
margin: 0 16px;
}
header nav ul li a {
font-size: 16px;
}
<header>
<nav id="nav-main">
<ul>
<li>Home</li>
<li>Elektro One</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</header>
Add "padding-left" and "padding-right" to the anchor tag CSS under "#nav-main" id. Please update below anchor CSS :
header nav ul li a {
font-size:16px;
padding-left: 30px;
padding-right:30px; }
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 space my navigation evenly across the top of my page while eliminated any empty space on the left, right, and between each link. I know I could probably just use the Calc function but it is not supported enough with older versions of browsers so I am looking for an alternative method.
My current code:
.nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #252839;
}
.nav ul {
list-style-type: none;
width: 100%;
}
.nav ul li{
color: #b5b5b7;
padding: 15px 0;
font-size: 1.2em;
display: inline-block;
}
.nav ul li:hover {
background-color: #677077;
color: #89C4F4;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Experience</li>
<li>Abilities</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Thanks for your help!
Use display:flex and flex-grow: 1 to expand the li elements, then change the a tags within to display: block and center the text.
.nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #252839;
}
.nav ul {
list-style-type: none;
width: 100%;
padding: 0;
display: flex;
}
.nav ul li{
flex-grow: 1;
}
.nav ul li a {
display: block;
text-align: center;
color: #b5b5b7;
font-size: 1.2em;
padding: 15px 0;
}
.nav ul li a:hover {
background-color: #677077;
color: #89C4F4;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Experience</li>
<li>Abilities</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
I've recently had a problem, where I want to keep all my content within a parent container, but I want the navigation background to be 100% of the width of the page. The methods I've tried have worked in terms of getting the navigation to be 100% width of the page, but now the ul inside isn't affected by the container, which is what I originally wanted.
I got it to work by using another container div inside the navigation, but I feel like this is a very makeshift method.
Any suggestions on how to get the parent container to affect the ul inside the nav?
HTML:
<div class="container">
<nav class="menu">
<div class="container">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>SERVICES</li>
<li>CURRENT PROJECT</li>
<li>PORTFOLIO</li>
<li>CONTACT ME</li>
</ul>
</div>
</nav>
</div>
CSS:
.container {
margin: 0 auto;
width: 1200px;
}
.menu {
left: 0;
right: 0;
height: 80px;
position: fixed;
background-color: rgb(33, 33, 33);
}
.menu ul {
padding: 0;
margin: 0;
color: #fff;
list-style: none;
font-weight: bold;
height: 80px;
float: right;
}
.menu ul li {
display: inline-block;
padding-right: 50px;
}
You can use :before or :after pseudo selector for creating background effect that looks like having width equal to the width of the page.
body {
overflow: hidden;
width: 100%;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.menu {
height: 80px;
position: relative;
}
.menu:before {
background-color: rgb(33, 33, 33);
position: absolute;
right: -9999px;
left: -9999px;
content: '';
z-index: -1;
bottom: 0;
top: 0;
}
.menu ul {
padding: 0;
margin: 0;
color: #fff;
list-style: none;
font-weight: bold;
float: right;
}
.menu ul li {
display: inline-block;
padding-right: 50px;
}
.menu ul li a {
color: #fff;
}
<div class="container">
<nav class="menu">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>SERVICES</li>
<li>CURRENT PROJECT</li>
<li>PORTFOLIO</li>
<li>CONTACT ME</li>
</ul>
</nav>
</div>
I am fairly new to this kind of stuff. I just want my nav bar to cover the page from side to side instead of having the white spaces on both sides and the top.
Here is my CSS
nav ul {list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;}
nav li {float: left;}
nav li a {display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover{background-color: #7559A6;}
Here is my HTML
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Resume</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Firstly, remove the default margin from the body
body {
margin: 0;
}
Then:
CSS tables
body {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;
display: table;
width: 100%;
}
nav li {
display: table-cell
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #7559A6;
}
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Resume
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
Flexbox
body {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3E3F43;
display: flex;
}
nav li {
flex:1;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #7559A6;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Resume</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
give your nav an id
<nav id=nav">
And set it's width to 100%
#nav{
width:100%;
}
Add in your css
nav{ position: absolute; width: 100%;left: 0;top: 0;}