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>
Related
I'm trying to make the following horizontal along the page, instead of vertical. I would like to do this as it is meant to be a header along the top of the site. Thanks.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Problems with you code:
The <header> element is wrong, should be <head>.
There's no <html> tag.
The </header> is orphaned.
There's no end tags for </body> and </head>.
Just do the two things:
Remove the width for the <ul>.
Add display: inline-block for the <li>.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
ul li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
try below css property for li
float: left;
Your code has several errors:
Look at this:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
/* width: 200px;*/
background-color: #f1f1f1;
}
li {display: inline-block}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
You need to put "display:inline-block" for the li.
<style>
ul li{
display:inline-block;
width: 20%; /* put width as per your requirement*/
}
</style>
add with display:inline-block its shows as horizontal and width will be auto its show as log. if you no need the change width into px`
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:auto;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li{display:inline-block;}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
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
When I hover over one of my menu items, the menu moves to the left. Why is that?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
float: left;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
color: gray;
font-size: 20px;
}
nav li:hover a {
color: black;
font-size: 22px;
}
As i can see you need to increase the size of the menu link when use hover on it but if you increase font-size this will dislocate the position of the link and thats the reason you link was moving to left.
Use css transform:scale(1.1,1.1) property to increase the size without change in position.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
display:block;
}
nav li:hover a {
color: black;
transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
transform property should be use with prefix to let it support in all browsers.
Please remove nav li:hover a { font-size:22px; } so that it does not move left on hover
Replace float with inline-block for <li>. And you are changing font-size on hover which is creating dancing effect on list items. Better keep same font-size for normal and hover states.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
}
nav li:hover a {
color: black;
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
Try playing with flex in css3 to see if that works for growing the text. Also there is an HTML menu tag you may want to have a look at.
Hey guys I've been having a weird css quirk happen and I can't seem to find the culprit. I have some li links displayed on top of a image based background and when I hover the links they change colors but all apply a white border around the type which looks horrible.
I added a normalize.css stylesheet to my project hoping it would kill any standard style applying it but that didn't seem to work. Does anyone have any idea why this is happening?
Here is my styles for my navigation
Nav CSS
nav {
width: 100%;
position: fixed;
top: 20;
z-index: 2;
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
Nav HTML
<nav>
<ul>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="menu">Menu</a></li>
<li><a ui-sref="delivery">Delivery Locations</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</nav>
After investigating, I found that the problem was simply... you had duplicate navbar!
Since the navbar has a fixed position, both of them would be at the same exact place. So when you hover a link in the front navbar, it becomes black.. BUT the same link at the back remains white, thus, creating a weird stroke.
Here is a demo that reproduces your problem:
body { background:#111; }
nav {
width: 100%;
position: fixed;
z-index: 2;
top: 20px; /* was missing a unit (px) */
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
<!-- stroke you say? -->
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
<!-- who's behind me? -->
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
Solution: just remove the duplicated navbar... simple mistake.
body { background:#111; }
nav {
width: 100%;
position: fixed;
z-index: 2;
top: 20px; /* was missing a unit (px) */
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
jsFiddle: https://jsfiddle.net/azizn/bf28e5g9/
Notice how the <app-navbar> appears twice in your code:
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;}