I'm making a website for fun and want to center my navigation bar but nothing seems to work. I want the navigation bar full the whole width but have the "buttons" in the middle. And also being responsive, I already tried adding in the css (navbar li): margin-left: 50%. But this isn't what I am looking for, margin-left: auto and margin-right: auto also doesnt work. I tried using display: inline-block and text-align: center; but it doesn't work. Do you have any suggestions?
.navbar {
position: relative;
margin-top: -47px;
}
.navbar ul {
width: 99%;
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
.navbar li {}
.navbar li a {
float: left;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dropdown-content {
display: none;
position: absolute;
margin-top: 47px;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
<div class="navbar">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Plans
<div class="dropdown-content">
Route
Places I want to go
My budget
</div>
</li>
<li class="dropdown">Journey
<div class="dropdown-content">
South-Africa
Thailand
Country1
Country2
Country3
Country4
</div>
</li>
<li>Photos</li>
<li>Other websites</li>
<li class="dropdown">About</li>
</ul>
</div>
Have you tried setting display: flex; on your <ul>? Then you should be able to add justify-content: center;.
By setting text-align: center; on the .navbar ul and display:inline-block; on .navbar ul, as seen below:
.navbar ul {
width: 99%;
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
text-align: center;
}
.navbar li {
display: inline-block;
}
Related
I have designed a navigation bar, which also needs to have a logo, the problem is that the image is bigger than the navigation buttons. Which is also visible when hovering over the items like in the image shown below.
How do I resolve this issue?
.navigation ul {
margin: 0;
}
.navigation li {
display: inline;
}
.navigation img {
max-width: 4ch;
}
.navigation a {
display: inline-block;
padding: .8em;
color: white;
text-decoration: none;
}
.main-navigation {
text-align: left;
}
.navigation a:hover {
background-color: rgba(255, 255, 255, 0.301);
color: black;
}
.nav-header {
background-color: rgba(0, 0, 0, .4);
background-image: url("Images/navbg.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
}
<header class="nav-header">
<nav class="navigation main-navigation">
<ul>
<li>
<img src="https://via.placeholder.com/60" class="logo-ic">
<</li>
<li>HOME</li>
<li>APPLICATIONS</li>
<li>ABOUT</li>
</ul>
</nav>
</header>
The usual solution these days is flex layout with center alignment of the child elements. Also take the padding off the logo anchor element or size it as needed.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox.
.navigation ul {
display: flex;
align-items: center;
margin: 0;
}
.navigation li {
display: inline;
}
.navigation img {
max-width: 4ch;
}
.navigation a {
display: inline-block;
padding: .8em;
color: white;
text-decoration: none;
}
.main-navigation {
text-align: left;
}
.navigation a:hover {
background-color: rgba(255, 255, 255, 0.301);
color: black;
}
.nav-header {
background-color: rgba(0, 0, 0, .4);
background-image: url("Images/navbg.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
}
<header class="nav-header">
<nav class="navigation main-navigation">
<ul>
<li class="logo">
<img src="https://via.placeholder.com/40" class="logo-ic">
</li>
<li>HOME</li>
<li>APPLICATIONS</li>
<li>ABOUT</li>
</ul>
</nav>
</header>
I want to create a dropdown nav menu with a modal like box appearing on hover.
Here in my example, Products heading needs to open 4 columns of subheadings that align themselves into a bootstrap like grid.
I am close to the result but I am facing a couple of hurdles: my hover does not seem to work. Also, my subheading appears only within the perimeter of my navbar - whereas I want it to appear a little below the navbar, with some padding.
I looked at these 2 examples but they did not help me:
stackoverflow reference 1
stackoverflow reference 2
Please find the code and guide me in the right direction:
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: grey;
}
.nav {
list-style: none;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}
.nav li:first-child {
margin-right: auto;
}
.nav li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 560px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 20;
border: 1px solid white;
padding: 80px;
height: 220px;
}
.dropdown-content ul {
display: block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.noshow {
display: none;
}
.dropdown-content:hover .noshow {
display: block
}
.subheading {
font-weight: 700;
}
<nav class="topnav">
<ul class="nav">
<li><a class="active" href="#title"> Title</a></li>
<li>
Products
<div class="dropdown-content arrow-up noshow">
<ul class="column large-3 each-column">
<li class="subheading">subheading</li>
<li>
subheading1
</li>
<li>
subheading2
</li>
<li>
subheading3
</li>
</ul>
</div>
</li>
<li>link2</li>
<li>link3</li>
<li><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
.left_menu {
float: left;
width: 50%;
}
.right_menu {
float: left;
width: 50%;
}
.right_menu ul {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
/* background-color: red;*/
/*color: white;*/
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="left_menu">
<ul>
<li>Title</li>
</ul>
</div>
<div class="right_menu" style="float: left; width: 50%">
<ul>
<li class="dropdown">
Product
<div class="dropdown-content">
The hover div of items should stay stable but it doesn't, when I move cursor from hover a tag it goes away
#ul1 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
width: 100px;
}
li {
width: 100px;
display: block;
}
li a,
.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: orange;
}
li.dropdown {
display: block;
}
li.dropdown2 {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: white;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content2 a {
position: relative;
top: 100px;
left: 500px;
color: white;
background-color: red;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: pink;
}
dropdown-content2 a:hover {
background-color: pink;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown2:hover .dropdown-content2 {
display: block;
}
<ul id="ul1">
<li> Home </li>
<li> Services </li>
<li class="dropdown">
Products
<div class="dropdown-content">
<ul id="ul2">
<li class="dropdown2"> Mobiles
<div class="dropdown-content2">
Mobile1
Mobile2
Mobile3
Mobile4
Mobile5
</div>
</li>
<li> Televisions </li>
<li> Microwave </li>
<li> Clothing </li>
<li> Footware </li>
</ul>
</div>
</li>
</ul>
I have tried many things to deal with this like scaling padding to max or increasing width and height but nothing works.
The div goes away as soon as I move my cursor for hovered item
I removed position:absolute from the dropdown <a> tags and fixed the positioning of each dropdown level. This resolves the positioning of submenus in relation to the parent menu.
The hover mechanism works well with the arrangement of the menus. When you hover out, the menus disappear, which is standard behavior for drop-down menus. If you wish to leave the menu visible on hover out, you will need to define a javascript function that controls menu visibility, for instance, hiding when clicking on a menu item.
#ul1 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
width: 160px;
}
li {
width: 160px;
display: block;
}
li a,
.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: orange;
}
li.dropdown {
display: block;
}
li.dropdown2 {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left:166px;
margin-top:-46px;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left:160px;
margin-top:-46px;
}
.dropdown-content a {
color: white;
/*padding: 20px 20px;*/
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content2 a {
color: white;
background-color: red;
/*padding: 20px 20px;*/
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: pink;
}
dropdown-content2 a:hover {
background-color: pink;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown2:hover .dropdown-content2 {
display: block;
}
#ul2 {padding:0px;}
<ul id="ul1">
<li> Home </li>
<li> Services </li>
<li class="dropdown">
Products
<div class="dropdown-content">
<ul id="ul2">
<li class="dropdown2" style="position:relative;"> Mobiles
<div class="dropdown-content2">
Mobile1
Mobile2
Mobile3
Mobile4
Mobile5
</div>
</li>
<li> Televisions </li>
<li> Microwave </li>
<li> Clothing </li>
<li> Footware </li>
</ul>
</div>
</li>
</ul>
I'm trying to make a nav for a website in html and css. It is very simple, and the only thing I want is to display dropdown menus and color them when hovered.
Right now I'm almost there, however I still have two problems:
The elements are overlapping
When you hover a submenu, there are two "hover" squared backgrounds
displayed.
I have the following CSS:
header {
background-color: rgb(147, 147, 147);
position: fixed;
top: 0;
margin: 0;
padding: 0;
left: 0;
height: 8%;
width: 100%;
border-bottom: 0.3em rgb(44, 171, 185) outset;
box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50);
}
header nav ul {
list-style-type: none;
top: 0;
margin: 0;
}
.active {
background-color: rgba(0, 0, 0, 0.35);
}
header nav ul li.active:hover {
background-color: rgba(48, 67, 91, 0.64);
}
header nav ul li {
position: relative;
display: block;
}
header nav ul li a {
display: block;
line-height: 40px;
padding: 8px;
margin: 0;
top: 0;
float: left;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
background-color: inherit;
}
header nav ul li:hover:not(.active) {
background-color: rgba(48, 67, 91, 0.35);
}
header nav ul li.dropdown ul {
display: none;
}
header nav ul li.dropdown:hover ul {
display: block;
position: absolute;
}
header nav ul li ul li {
display: block;
float: none;
padding: 30px;
}
And my html is the following:
<body>
<header>
<nav>
<ul>
<li class="active">Element1</li>
<li>Element2</li>
<li class="dropdown">Menu
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</ul>
</nav>
</header>
</body>
What I want is to change the background of the hovered element and to display correctly the subelements in the dropdowns.
I hope I was clear enough, thank you
You can see the code here: https://jsfiddle.net/hdd260s4/
Hello I changed according to your requirement. Please use this code.let me know any query.
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color: rgb(147, 147, 147);
position: fixed;
top: 0;
margin: 0;
padding: 0;
left: 0;
height: 56px;
width: 100%;
border-bottom: 0.3em rgb(44, 171, 185) outset;
box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50);
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header nav li {
float: left;
}
header nav ul li a {
display: block;
line-height: 40px;
padding: 8px;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
background-color: inherit;
}
header nav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
.active {
background-color: rgba(0, 0, 0, 0.35);
}
header nav ul li.active:hover {
background-color: rgba(48, 67, 91, 0.64);
}
header nav li a:hover, .dropdown:hover .dropbtn {
background-color: rgba(48, 67, 91, 0.35);
}
header nav li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(48, 67, 91, 0.35);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li class="active">Element1</li>
<li>Element2</li>
<li class="dropdown">
Menu
<div class="dropdown-content">
Submenu1
Submenu2
Submenu3
</div>
</li>
</ul>
</header>
</nav>
</body>
</html>
I uploaded My code here please see this demo.https://jsfiddle.net/hansraj/bmbuLcfk/
Please try this and change according to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</body>
</html>
I uploaded My code here please see this demo.https://jsfiddle.net/hansraj/z2sojhbm/
My fiddle so far:
https://jsfiddle.net/dzjqor2d/
I just can't get the middle <li> to center, whatever I try.
My Code:
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
}
ul li {
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child {
float: right;
}
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
Note:
Content is dynamic, so is the width of the container
make first li to left and last to right rest will float as per ul's text-alignment:
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
text-align: center;
}
ul li {
list-style: none;
display:inline-block;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child{
float:right;
}
ul li:first-child{
float: left;
}
demo
You shouldn't need to float the last li right, use margins to get the alignments right:
ul li {
margin: 0 20px;
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
https://jsfiddle.net/dzjqor2d/8/
You may try using the CSS3 :nth-child() Selector with your ul and li tag
HTML
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
CSS
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
text-align:center;
}
ul li {
list-style: none;
display:inline-block;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:nth-child(1){
float:left;
}
ul li:nth-child(3){
float:Right;
}
These days flexbox is the way to go, in the past floating was great, but now not so much.
for the UL I've added display: flex; and justify-content: space-between; this means; make them all fit in one block and if there is extra space, just put have space between them.
Here have a look:
body {
margin: 0;
}
ul {
display: flex;
justify-content: space-between;
width: calc(100% - 40px);
background-color: #F5FAFF;
padding: 20px;
}
ul li {
list-style: none;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
I've changed the width to make the example easier to see.
Hope this helps.
Just use below css for ul:
ul {width: 70%;overflow: auto;background-color: #F5FAFF;padding:20px;display: flex;}