I am new to CSS and I am making a navigation bar. Currently, my navigation bar is situated on the left and I would like to move the whole bar to the middle. How can I do that?
Below are the codes. Thanks in advance!
/* Navigation bar */
#navigation_bar {
list-style-type: none;
margin: 0;
position: fixed;
background-color: #333;
top: 0;
Left: 0;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.active {
background-color: #4CAF50;
}
<!--Navigation bar-->
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li>Promotion.</li>
<!--drop down menu-->
<li class="dropdown">Hot Products.
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li>Cold Products.</li>
<li>Snacks.</li>
<li>About Us.</li>
<li>Contact Us.</li>
</ul>
Update your #navigation_bar with
#navigation_bar {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
Here is the working Demo
#navigation_bar {
list-style-type: none;
margin: 0;
position: fixed;
background-color: #333;
top: 0;
Left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.active {
background-color: #4CAF50;
}
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li>Promotion.</li>
<!--drop down menu-->
<li class="dropdown">Hot Products.
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li>Cold Products.</li>
<li>Snacks.</li>
<li>About Us.</li>
<li>Contact Us.</li>
</ul>
By changing a bit of your CSS code you can easily do that as:
#navigation_bar {
text-align: center;
}
#navigation_bar li {
float: none;
display: inline-block;
vertical-align: top;
}
li .dropdown-content a:hover:not(.active) {
background: #d0d0d0; /* for altering the hover effect on submenus */
}
I have also created a JSFiddle.
Change navigation_bar css to :
#navigation_bar {
list-style-type: none;
margin: 0 auto;
position: fixed;
background-color: #333;
top: 0;
width: auto;
display: block;
float: left;
}
Try this
#navigation_bar{ text-align: center;} /*add align center */
li {display: inline; /* float:left; */} /* remove float left here and add display inline */
Related
My website's responsive navigation dropdown content wont display on the screen, its somehow displaying it outside of the page...
Is there also a way to add a little animation to the click of the content so it wont look so "rough"?
Problem img: http://prntscr.com/p5pre5
The animation isn't a priority, but getting the navigation dropdown content to display on screen is.
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
Support
Order Website
</div>
</li>
</ul>
</nav>
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
Is there also a way to add a little animation to the click of the content so it wont look so "rough"?
1) Add to .dropdown-content code:
transition: 0.2s;
transform-origin: top;
transform: scaleY(0);
2) Add to .dropdown:hover .dropdown-content code:
transform: scaleY(1);
its somehow displaying it outside of the page
1) Add to .li.dropdown code:
position: relative;
2) Add to .dropdown-content code
right: 0;
Result
https://codepen.io/hisbvdis/pen/BaBVGKe
.toggle,
[id=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img {
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
li.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
/* display: none; */
position: absolute;
right: 0;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
transition: 0.2s;
transform-origin: top;
transform: scaleY(0);
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
/* display: block; */
transform: scaleY(1);
}
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
Support
Order Website
</div>
</li>
</ul>
</nav>
In your .dropdown-content class add a right: 0;
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:black;
right: 0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
Support
Order Website
</div>
</li>
</ul>
</nav>
I have two pages of code. I want the first page's dropdown menu to look like the second page's dropdown menu. The second page is some code I copied and pasted from W3 Schools.
The problem is on the first page the drop down menu's width is the same as the navigation bar. I want to have a smaller width for the navigation bar and I can't figure out how why it is the same width of navigation bar.
First Page
ul {
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;
list-style-type: none;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
padding: 50px 100px;
text-decoration: none;
color: white;
}
li a:hover {
color: white;
background-color: #333;
}
.dropdown {
display: inline-block;
}
.dropcont {
display: none;
position: absolute;
background-color: #333 min-width:200px;
z-index: 1;
}
.dropcont a {
color: white;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
Second Page
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
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;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Here is the updated css :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color:#333;
}
li.dropdown {
display: inline-block;
}
.dropcont {
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;
}
.dropcont a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropcont a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
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">
I have added a second CSS dropdown menu on my page and it appears on the left of the page. The first one has text center-aligned and everything works great. I added a second one for when an admin is logged in for admin operations.
The text is right-aligned in this menu and the dropdown appears on the left of the screen.
Here is a jsfiddle - https://jsfiddle.net/q0nsrdgo/
Html
<div id="loginbar">
<ul>
<li>Welcome Xenarious | </li><li>Logout |</li>
<li class="dropdown">Admin Controls
<div class="dropdown-content">
Add Customer
Edit Customer
Add Product
Update Product
</div>
|</li> <li>Orders</li>
</ul>
</div>
<header>
<img src="../common/techtitan-title.png">
</header>
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a href="products.html"
class="dropbtn">Products</a>
<div class="dropdown-content">
<!--Desktops-->
Notebooks
Tablets
Smartphones
</div>
</li>
<li>Services</li>
<li>About Us</li>
<li>Feedback</li>
</ul>
Css
#loginbar {
text-align: right;
background-color: #1D6000;
color: #FFD700;
font-size: 10pt;
z-index: 2;
overflow: auto;
width: 100%;
display: block;
margin: auto;
}
header {
background-color: #1D6000;
margin-bottom: 0;
text-align: center;
z-index: 1;
}
header img {
margin: auto;
text-align:center;
}
nav {
overflow: auto;
width: 100%;
display: block;
margin: auto;
margin-bottom: 20px;
background-color: #1D6000;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(5,5,5,0.5);
border-bottom: 3px ridge #FFD700;
font-size: 14pt;
}
nav ul, #loginbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1D6000;
}
nav li, #loginbar li {
/*float: left*/
display: inline;
margin: 0;
padding: 0;
}
li a, .dropbtn {
display: inline-block;
color: #FFD700;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #FFD700;
color: #1D6000;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1D6000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(5,5,5,0.5);
/*z-index: 1;*/
}
.dropdown-content a {
color: #FFD700;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #FFD700;
color: #1D6000;
}
.dropdown:hover .dropdown-content {
display: block;
}
Update your CSS as follows -
nav li, #loginbar li {
display: inline-block;
margin: 0;
padding: 0;
}
Since only your .dropdown class was set to inline-block, the dropdown wasn't being displayed as required.
I'm beginner to css & html and creating have been having trouble with creating a dropdown menu inside navigation bar . In the drop down menu "Product" it doesnt show the dropdown menu list when clicked. If anyone can point out the issue I would be really grateful. Below is the HTML code for the navigation bar:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown:hover .dropbtn {
display: block;
}
<ul class="Navigation">
<li>HOME
</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT
</li>
</ul>
You need to change your .dropbtn to .dropdown-content like this:
.dropdown:hover .dropdown-content{
display: block;
}
Here is a snippet of the code:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
background-color: #4c4747;
}
.dropdown:hover .dropdown-content{
display: block;
}
<ul class="Navigation">
<li>HOME</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT</li>
</ul>
you can try this one:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4C4747;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover
{
background-color:red;
}
.dropdown:hover .dropdown-content{
display: block;
}
DEMO HERE
You need to change your .dropbtn to .dropdown-content because then the button will be displayed (with display: block;) when you hover over .dropdown even though that is being displayed anyways. You want your content to be displayed when you hover over .dropdown. So change it to this-
.dropdown:hover .dropdown-content {display: block;}