I trying to make a navbar that when you hover over one of its item it it drops down and shows another set of list items i know how to make the dropdown effect but i cant quite center the secondary list items above the parent list item
.container{
width: 90%;
margin: 0 auto;
}
header{
background: black;
height: 100px;
}
.container > ul {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container >ul li{
margin: 7px;
position: relative;
border: 1px solid green;
}
.container >ul li,
.container > ul li a{
list-style: none;
text-decoration: none;
padding: 4px;
}
.container ul ul{
position: absolute;
}
<header>
<div class="container">
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</header>
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 having troubles making my list go to the left of my nav element. I have tried to make the nav element relative and list absolute, but that just makes the words overlap each other.
nav {
height: 50px;
width: 400px;
background-color: red;
}
li {
display: inline;
justify-content: space-evenly;
margin: 10px;
font-size: 20px;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
You can achieve the same result by setting display property of ul to flex
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
ul{
margin: 0;
padding: 0;
display:flex;
justify-content: space-around;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
The justify-content property is irrelevant here - it only applies to elements in a Flex or Grid layout.
The issue here is the default margin/padding on the <ul> and <li> elements.
You might also want to set the line-height on the <nav> so that the list items are more centred.
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 10px;
font-size: 20px;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
I have already put a div tag along the place where I want to split the list items. However, when I do float left or right, it doesn't work. I want to create a navigation bar where the user can browse the website on the left and manage their account on the right. Can anyone help me?
This Is The HTML and CSS Code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
}
li {
float: left;
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</div>
<div class="last">
<li>Sign In</li>
<li>Login</li>
</div>
</ul>
</div>
How The Navigation Bar Looks Now
Can you please check the below code? Hope it will work for you.
As per Html standards, we can not use div directly inside ul(unordered list) so we added 2 ul inside .navigation div. With the help of flex properties, display:flex; and justify-content:space-between; we have separated items in .navigation as per your requirement.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/764rdezq/1/
.navigation {
background-color: #0f0f0f;
border-radius: 50px;
overflow: hidden;
display:flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:flex;
display: -webkit-flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<div class="navigation">
<ul>
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</ul>
<ul>
<li>Sign In</li>
<li>Login</li>
</ul>
</div>
</div>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
display: flex;
justify-content: space-between;
}
.last,
.first {
display: flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</div>
<div class="last">
<li>Sign In</li>
<li>Login</li>
</div>
</ul>
</div>
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>
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.