I need to add a dropdown to my "contact" section and I'm wondering if anyone could help me out with it. I've tried to use: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
but with my ongoing style it is not 100% working correctly. Is there any other way I could implement a dropdown to my "contact" section without adding a "Button" property?
<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>Contact</li>
</div>
</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;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding:14px 20px;
color:black;
font-size:17px;
text-decoration:none;
border:none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
}
I think It is necessary to add button...
check my code i have done some changes for you in you code by clicking "Run code snippet" and then "view full page".
.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;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 20px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding: 14px 20px;
color: black;
font-size: 17px;
text-decoration: none;
border: none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked+ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
<body>
<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>
<div class="dropdown">
<button class="dropbtn">Contact
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</div>
</ul>
</nav>
</body>
Related
After nearly a week I am still struggling with toggle on navigation.
This is my current CSS, what I need to do now, is simply get the toggle to open, it did open before so something minor is stopping it now but I cant work it out. I do not really know much about CSS as I keep forgetting it, but I do not know javascript or jquery
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
``` .menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+.menu {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
Here is an example for this. You can try this code. It is fully tested. I hope it will help you. You can change colors and backgrounds as per needed in this code.
nav ul ul {
display: none;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
list-style-type: none;
}
nav li a {
text-decoration: none;
display: inline-block;
margin: 10px 20px 5px 0;
padding: 8px 10px;
}
nav li a:link, nav li a:visited {
color: #646565;
background: #e8e9eb;
}
nav li a:link:hover, nav li a:visited:hover {
color: black;
}
nav li:hover ul {
display: block;
position: absolute;
}
input.toggle,
label.toggle {
display: none;
}
label.toggle {
font-weight: 900;
font-size: 1.2em;
padding: 10px 20px;
}
#media (max-width: 960px) {
nav {
display: none;
}
input.toggle, .toggle span {
display: none;
}
input[type=checkbox]:checked ~ nav, label.toggle {
display: block;
cursor: pointer;
}
nav li {
float: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li ul {
display: block;
}
nav li ul li {
margin-left: 20px;
}
nav li a {
display: block;
margin-left: 20px;
}
}
<div class="wrapper">
<label class="toggle" for="toggle">☰ <span>Menue</span></label>
<input class="toggle" id="toggle" type="checkbox">
<nav>
<ul>
<li class="current">Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li>Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</nav>
</div>
Just change your selector from:
#toggle:checked+.menu {
display: block;
}
to:
#toggle:checked+ ul {
display: block;
}
See snippets below:
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+ul {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
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 am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>
Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
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 */