I have a navbar that contains elements, and I'm not able to center them in the middle of the navbar. I do not want to use bootstrap. Whatever I do, it still starts from the left side. I originally had the ul as the .topnav but it still wasn't centering the elements.
HTML:
<html lang="en">
<body>
<div class="topnav">
<ul >
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
</body>
</html>
CSS:
.topnav{
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align:center;
align-items: center;
}
.topnav ul{
list-style-type: none;
margin: 0 auto;
}
.topnav li {
float: left;
}
.topnav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width:100px;
}
.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
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;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
JSFiddle: https://jsfiddle.net/29r9d18a/1/
Update the class definition
.topnav ul{
list-style-type: none;
margin: 0 auto;
display:inline-block;
}
Updated jsFiddle
.topnav ul{
list-style-type: none;
margin: 0;
display: inline-block;
-webkit-padding-start: 0;
}
You will no longer need the auto x-margin on the ul element with inline-block positioning and the parents center aligning, but you may want to override Safari's auto padding which will push it to the right slightly on Macs.
Use display: flex AND text-align: center
.topnav{
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex; //HERE
text-align: center !important; //HERE
}
change the '.topnav ul' class to the following in your css code :
.topnav ul{
list-style-type: none;
margin: 0 auto;
margin-left: 27%;
}
This will shift your list to a bit right side and thus show it on the center.
Related
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
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 new to programming. I'm having trouble centering a <nav> bar a made. I followed this specific one.
How would I be able to center entire nav bar?
Click Here
set text-align:center to ul and remove float:none from li and add display:inline-block
check with demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align:center;
}
li {
float: none;
display:inline-block;
}
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);
}
.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>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
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;}
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 */