I've got the problem that on my small test website I can't get the navigation bar centered.
I want to have all the buttons on it centered while the navigation bar goes from the right to the left side of the website. I've got no fixed width and don't want to have one. The solution should also work with smartphones and tablets and just to mention: I don't really care about IE support.
I already searched a bit through the web but got nothing I've tried working.
Here is the code I've already got:
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
And here is the CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
I'm using HTML5 with CSS3.
EDIT: It seems to be that I wasn't clear enough with the buttons. The buttons should not be as large as the navigation bar itself. All buttons should be centered on the navigation bar, so in the middle there are the buttons and on the left and right side there is just the black navigation bar without buttons if there is enough space left, ofcourse.
Using flexbox will do exactly that...
adding flex-flow: row wrap; will allow the menu to wrap on smaller screens if the navigation is larger than the viewport.
You will need to prefix those styles to run on all browsers FYI.
.navigation nav {
display: flex;
justify-content: center;
background-color: #333333;
}
ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover {
background-color: #111111
}
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Download
</li>
<li>Contact
</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
Solution just with two lines of css:
1. ul{ text-align: center;}
2. li{display: inline-block;}
That's all :)
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
text-align: center;
}
li { display: inline-block; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
</style>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>
The simpliest solution I think will be if will just divide 100% by number of li items in menu, so in this case we have 3 li elements so about 33% of width:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li {
float: left;
width: 33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
<html>
<head>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>
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 have created a menu bar which I tried to make beautiful and align the text right but the a tag overlaps the previous one what I've tried is prioritize one selector over another one. with z-index.
So basically I want the nav bar to look like my website but I want the buttons to be clickable and not overlapping each other for the website.
If you check an early build of my website on Desktop I think you can understand my problem better due to my horrible English writing skills.
Website
and some code
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a {
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
width: 100%;
margin: 0;
}
nav ul li a:hover {
background-color: inherit;
position: absolute;
}
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
Replace this:
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
by:
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
Basically what you need to do is to wrap the li tag or div tag whatsoever inside the anchor tag. By doing this the clickable buttons will automatically take the right position.
Hope you'll find this useful.
If I understood you well, you want to make it like this:
HTML
<body>
<nav>
Home
About
Contact
Login
</nav>
<div class="">
Rest of website
</div>
CSS
nav{
text-align: right;
}
nav a{
margin: 0 2%;
text-decoration: none;
color: black;
}
I'd be happy if it's helpful.
What I eventually did was put out the header section into a different container named navbar-container So I could style the navbar separately from the other containers. Making the width bigger without interfering with the other code. (I dont know in anyway if this is an correct way to code.) And I styled the navbar:
.navbar-container {
text-align: center;
padding: 0.8em 1.2em;
}
/* and removing the width: 100% from here; */
}
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a{
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
margin: 0;
}
nav ul li a:hover {
color: black;
background-color: inherit;
}
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
I am trying to prevent my menu from overlapping onto itself when the viewport gets small and the menu items get pushed to the next line. Seems like a simple problem but I have spent hours on this problem with no avail.
nav {
position: absolute;
width: 100%;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
}
<body>
<header>
<nav>
<ul>
<li>NavItem
</li>
<li>NavItem
</li>
<li>NavItem
</li>
<li>NavItem
</li>
<li>NavItem
</li>
</ul>
</nav>
</header>
</body>
Now shrink your window and the items all overlap.
Change the nav a{} to nav li{}:
nav li {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
}
See the JSFiddle.
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: