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;}
Related
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 learning html css, now i want to create nav bar as my task. so when am trying to create horizontal nav bar, my menus are not showing at the center of my nav bar div ? why its attached with top corner ? i want them at center from top and bottom here is my code correct my mistake
* {
margin: 0;
padding: 0;
}
nav {
background-color: red;
}
ul {
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
}
nav ul li {
display: inline;
padding: 10px;
margin-top: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li:hover {
background-color: blue;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
</nav>
Here is what you can do, you can use flex and tweak your code if needed.
body {
margin: 0;
padding: 0;
justify-content: center;
text-align: center;
display: flex;
}
nav {
background-color: red;
}
ul {
justify-content: center;
text-align: center;
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
display: flex;
flex-direction: row;
}
ul li {
margin-top: 10px;
}
ul li a {
text-decoration: none;
color: black;
padding: 5px;
}
ul li:hover {
background-color: blue;
}
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
I added display:inline-block to both li and ul and text-align:center to nav.
and that will make margin-top works.
* {
margin: 0;
padding: 0;
}
nav {
text-align: center
}
ul {
list-style: none;
height: 35px;
background-color: purple;
width: 50%;
display: inline-block
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
}
nav ul li:hover {
background-color: blue;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
</nav>
check here: https://jsfiddle.net/w3hn1L95/
You need to add a
test-align: center;
to your ul element in css.
I'm totally new to HTML and CSS. And I would like to get my navigation bar a little more to the left.
Now here is also a screenshot about what I mean https://prnt.sc/myh7gm
I would like to get it a couple px/cm to the left like you can see on here
https://prnt.sc/myh75s
My code
<body>
<header>
<nav>
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About me</li>
<li>Home</li>
</ul>
</nav>
</header>
CSS
/* navigation bar */
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
li {
float: right;
}
li a {
display: block;
color: rgb(0, 0, 0);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
opacity: 0.;
}
Try adding padding in the css
.navbar {
padding-left: 20px
/* any other rules you wnat to add*/
}
or left:20px
I can't see you links.
go to https://www.w3schools.com/howto/howto_css_navbar_icon.asp for more ideas.
Margin-right is a fine way to do it. Check out the class I added to the nav element. Best practice to target a class with your CSS, that way your rules dont affect every nav, ul, li etc in your site.
.main-navigation {
margin-right: 50px; // whatever distance from the right you want
}
.main-navigation ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
.main-navigation li {
float: right;
}
.main-navigation li a {
display: block;
color: rgb(0, 0, 0);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main-navigation li a:hover:not(.active) {
opacity: 0.;
}
<body>
<header>
<nav class="main-navigation">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About me</li>
<li>Home</li>
</ul>
</nav>
</header>
</body>
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 been trying to center the items within the navigation but no such luck. Every single solution turns my navigation bar from this: horizontal navigation bar to this: vertical navigation bar.
Any help would be greatly appreciated!
HTML with CSS code:
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Just remove the float from the li and make the inline-block
li {
/* float: left; */
display:inline-block;
}
The first rule of centering is..."Don't use floats"
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
I removed your css on li tag with float and changed it to display and width:
li {
display: -webkit-inline-box;
width: 60px;
}
https://i.stack.imgur.com/LbYd4.png`
I hope this helped you #C. Lagos