I'm trying to make my search bar go above my menu, but it seems to be in the center of the page. I'm not sure what's forcing it down below my menu bar div, but I suspect it's something in the CSS because the search bar is technically on the same row as where the logo should be going. I've divided the row into two columns, one a small col-sm-3, and the other a width of 9.
so I want it to look like this:
But it currently looks like this:
Here is my html:
<!--Fixed Search Bar-->
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Insert Logo</h5>
</div>
<div class="col-sm-9">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!--End of Fixed Search Bar-->
<!--Menu-->
<div id="cssmenu">
<ul>
<li class="active"><span><i class="fa fa-fw fa-home"></i> Home</span></li>
<li><span><i class="fa fa-fw fa-comment-o"></i> Messages</span></li>
<li><span><i class="fa fa-fw fa-bell-o"></i> Notifications</span></li>
<li class="has-sub">
<span><i class="fa fa-fw fa-user"></i> My Account</span>
<ul>
<li><span><i class="fa fa-fw fa-gear"></i> Settings & Preferences</span></li>
<li><span>Billing & Subscriptions</span></li>
<li><span><i class="fa fa-fw fa-plus-circle"></i> Paid Features & Power Profile</span></li>
<li><span><i class="fa fa-fw fa-search"></i> Searching & Matching</span></li>
<li><span>Start a Company Page</span></li>
<li><span><i class="fa fa-fw fa-sign-out"></i> Log-Out</span></li>
</ul>
</li>
<li class="has-sub">
<span>Need Help?</span>
<ul>
<li><span>Submit a Request</span></li>
<li><span>Dispute a Review</span></li>
<li><span>FAQs</span></li>
</ul>
</li>
<li><span>About Us</span></li>
</ul>
</div>
<!--End of Menu-->
Here is my CSS:
/*search bar*/
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*end of search bar*/
/* menu bar*/
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #0b3c5d;
background: -moz-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #115f94), color-stop(100%, #0b3c5d));
background: -webkit-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -o-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -ms-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: linear-gradient(to bottom, #115f94 0%, #0b3c5d 100%);
border-bottom: 2px solid #328cc1;
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #0b3c5d;
background: -moz-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #115f94), color-stop(100%, #0b3c5d));
background: -webkit-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -o-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -ms-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: linear-gradient(to bottom, #115f94 0%, #0b3c5d 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
font-size: 0;
}
#cssmenu > ul > li {
display: inline-block;
float: left;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #328cc1;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #031019;
-moz-box-shadow: inset 0 0 3px #031019;
-webkit-box-shadow: inset 0 0 3px #031019;
background: #082d46;
background: -moz-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f517d), color-stop(100%, #082d46));
background: -webkit-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: -o-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: -ms-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: linear-gradient(to bottom, #0f517d 0%, #082d46 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #328cc1;
border-bottom: 1px dotted #53a3d3;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #286f98;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #286f98;
border-bottom: 1px dotted #53a3d3;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #226084;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
/* end of menu bar*/
remove wrap class and from search class width:100%
and
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 38px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchButton {
position: absolute;
right: 0px;
top:0px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*search bar*/
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
position: relative
}
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 38px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: 0px;
top:0px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*end of search bar*/
/* menu bar*/
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #0b3c5d;
background: -moz-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #115f94), color-stop(100%, #0b3c5d));
background: -webkit-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -o-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -ms-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: linear-gradient(to bottom, #115f94 0%, #0b3c5d 100%);
border-bottom: 2px solid #328cc1;
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #0b3c5d;
background: -moz-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #115f94), color-stop(100%, #0b3c5d));
background: -webkit-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -o-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: -ms-linear-gradient(top, #115f94 0%, #0b3c5d 100%);
background: linear-gradient(to bottom, #115f94 0%, #0b3c5d 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
font-size: 0;
}
#cssmenu > ul > li {
display: inline-block;
float: left;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #328cc1;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #031019;
-moz-box-shadow: inset 0 0 3px #031019;
-webkit-box-shadow: inset 0 0 3px #031019;
background: #082d46;
background: -moz-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f517d), color-stop(100%, #082d46));
background: -webkit-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: -o-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: -ms-linear-gradient(top, #0f517d 0%, #082d46 100%);
background: linear-gradient(to bottom, #0f517d 0%, #082d46 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #328cc1;
border-bottom: 1px dotted #53a3d3;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #286f98;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #286f98;
border-bottom: 1px dotted #53a3d3;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #226084;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Fixed Search Bar-->
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Insert Logo</h5>
</div>
<div class="col-sm-9">
<div class="">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!--End of Fixed Search Bar-->
<!--Menu-->
<div id="cssmenu">
<ul>
<li class="active"><span><i class="fa fa-fw fa-home"></i> Home</span></li>
<li><span><i class="fa fa-fw fa-comment-o"></i> Messages</span></li>
<li><span><i class="fa fa-fw fa-bell-o"></i> Notifications</span></li>
<li class="has-sub">
<span><i class="fa fa-fw fa-user"></i> My Account</span>
<ul>
<li><span><i class="fa fa-fw fa-gear"></i> Settings & Preferences</span></li>
<li><span>Billing & Subscriptions</span></li>
<li><span><i class="fa fa-fw fa-plus-circle"></i> Paid Features & Power Profile</span></li>
<li><span><i class="fa fa-fw fa-search"></i> Searching & Matching</span></li>
<li><span>Start a Company Page</span></li>
<li><span><i class="fa fa-fw fa-sign-out"></i> Log-Out</span></li>
</ul>
</li>
<li class="has-sub">
<span>Need Help?</span>
<ul>
<li><span>Submit a Request</span></li>
<li><span>Dispute a Review</span></li>
<li><span>FAQs</span></li>
</ul>
</li>
<li><span>About Us</span></li>
</ul>
</div>
<!--End of Menu-->
The wrap class in the div above the div containing you search class is causing this issue.
Change
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
to
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this:
CSS
.wrap {
width: 30%;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
Note: You can change the width of the search bar and the top size...just play with it.
DEMO HERE [update]
I'm not sure what's forcing it down below my menu bar:
What is forcing is your .wrap class with this rules:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Related
I have a nav bar with following HTML:
<nav id="menu-bar">
<ul>
<li><a href='http://sunilpatro1985.blogspot.in/' >Home</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/SeleniumTesting'>Selenium</a>
<ul>
<li><a href='http://sunilpatro1985.blogspot.in/2015/04/selenium-testng.html'>TestNG</a></li>
<li><a href='http://sunilpatro1985.blogspot.com/2015/03/selenium-result-report-testng-ant.html'>ANT Reporting</a></li>
</ul>
</li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/SoftwareTesting'>TestingConcepts</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/BasicJava' >JavaBasics</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/WindowsOS' >Windows</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/p/demo.html' >Demo</a></li>
</ul></nav>
and the CSS I used:
#menu-bar {position: fixed; top: 0px; left: 0px; z-index: 999;height:0px;}
#menu-bar,#menu-bar a {
text-align: center;
margin: 0px 0px;
border:none;
}
#menu-bar ul ul {
display: none;
}
#menu-bar ul li:hover > ul {
display: block;
}
#menu-bar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#menu-bar ul:after {
content: ""; clear: both; display: block;
}
#menu-bar ul li {
float: left;
}
#menu-bar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#menu-bar ul li:hover a {
color: #fff;
}
#menu-bar ul li a {
display: block; padding: 15px 30px;
color: #757575; text-decoration: none;
}
#menu-bar ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menu-bar ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu-bar ul ul li a {
padding: 15px 30px;
color: #fff;
}
#menu-bar ul ul li a:hover {
background: #4b545f;
}
#menu-bar ul ul ul {
position: absolute; left: 100%; top:0;
}
This above menu bar only covers 80% of my desktop screen. How can I make it full width? I tried some options as mentioned in other Stack Overflow answers, but nothing helped completely. Please help me make menu bar full width on screen.
It doesn't look like you're actually setting the nav element to be 100% of the width in the CSS. Try adding this:
#menu-bar { width: 95%;}
#menu-bar > ul {width: 100% }
That worked in jsFiddle but you may need to adjust the percentage for menu-bar (the first line).
Try this code:
#menu-bar{width:100%}
#menu-bar ul{width:100%}
Just add right: 0 to #menu-bar:
#menu-bar {
position: fixed;
top: 0;
left: 0;
right: 0; /* <-- here */
z-index: 999;
height: 0; /* why is the height "0"? */
}
I have a blog here, which has a navbar with dropdown functionality.
However I am not getting the dropdown list under the item "Selenium" in Chrome, but the dropdown is working fine in other browsers
Unfortunately I do not understand where the problem is.
I have a nav bar with following html:
<nav id="menu-bar">
<ul>
<li><a href='http://sunilpatro1985.blogspot.in/' >Home</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/SeleniumTesting'>Selenium</a>
<ul>
<li><a href='http://sunilpatro1985.blogspot.in/2015/04/selenium-testng.html'>TestNG</a></li>
<li><a href='http://sunilpatro1985.blogspot.com/2015/03/selenium-result-report-testng-ant.html'>ANT Reporting</a></li>
</ul>
</li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/SoftwareTesting'>TestingConcepts</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/BasicJava' >JavaBasics</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/search/label/WindowsOS' >Windows</a></li>
<li><a href='http://sunilpatro1985.blogspot.in/p/demo.html' >Demo</a></li>
</ul></nav>
and the CSS styling for the above is:
#menu-bar {position: fixed; top: 0px; left: 330px; z-index: 999;height:0px;}
#menu-bar,#menu-bar a {
text-align: center;
margin: 0px 0px;
border:none;
}
#menu-bar ul ul {
display: none;
}
#menu-bar ul li:hover > ul {
display: block;
}
#menu-bar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
}
#menu-bar ul:after {
content: ""; clear: both; display: block;
}
#menu-bar ul li {
float: left;
}
#menu-bar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#menu-bar ul li:hover a {
color: #fff;
}
#menu-bar ul li a {
display: block; padding: 15px 30px;
color: #757575; text-decoration: none;
}
#menu-bar ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menu-bar ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu-bar ul ul li a {
padding: 15px 30px;
color: #fff;
}
#menu-bar ul ul li a:hover {
background: #4b545f;
}
#menu-bar ul ul ul {
position: absolute; left: 100%; top:0;
}
In menu-bar you have a ul. Add style="overflow: visible;" to the ul and that will fix it.
You have to add overflow:visible; to your menu-bar->ul element
#menu-bar ul {
overflow:visible;
}
Fixed css
#menu-bar {position: fixed; top: 0px; left: 330px; z-index: 999;height:0px;}
#menu-bar,#menu-bar a {
text-align: center;
margin: 0px 0px;
border:none;
}
#menu-bar ul ul {
display: none;
}
#menu-bar ul li:hover > ul {
display: block;
}
#menu-bar ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#menu-bar ul:after {
content: ""; clear: both; display: block;
}
#menu-bar ul li {
float: left;
}
#menu-bar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#menu-bar ul li:hover a {
color: #fff;
}
#menu-bar ul li a {
display: block; padding: 15px 30px;
color: #757575; text-decoration: none;
}
#menu-bar ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menu-bar ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu-bar ul ul li a {
padding: 15px 30px;
color: #fff;
}
#menu-bar ul ul li a:hover {
background: #4b545f;
}
#menu-bar ul ul ul {
position: absolute; left: 100%; top:0;
}
For some reason each bit of text in the navigation bars are aligning to the right. Is there any way to change this so it goes into the center of each part of the navigation menu? If somebody knows how to do this can you please help out because I am completely stumped.
HTML:
<div id="links">
<nav>
ul>
<li>Students
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
<li>Teachers
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
</li>
<li>Events
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
</li>
<li>Nametag
<li>SignUp</li>
<li>Gallery
</ul>
CSS:
#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
#links a{
margin:25px;
width:10px;
height: 0px;
font-size: 20px;
margin-top: 3px;
}
nav ul {
background: #A3A3A3;
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%);
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 40px;
color: #FFFFFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
width: 140px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 0px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #A3A3A3;
}
Your anchors are fixed width, but not wide enough to hold the text. Consequently, it overflows out to the right.
add this css
#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
#links > a{
padding:10px;
font-size: 20px;
}
nav ul {
background: #A3A3A3;
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%);
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav > ul > li {
float: left;
text-align: center;
}
nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav > ul > li > a{
display: block;
padding: 10px 15px;
color: #FFFFFF; text-decoration: none;
font-size:20px;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 20px;
color: #fff;
display:block;
text-decoration:none;
}
nav ul ul li a:hover {
background: #A3A3A3;
}
EXAMPLE
This question already has answers here:
how can I center this menu with CSS
(4 answers)
Closed 8 years ago.
I want to center my menu made with html/css but I have no idea how should I do it, I've searched but I can't seem to find the answer
I show you the menu and the desired menu:
http://i.imgur.com/S2tLj8Q.jpg -> http://i.imgur.com/VFyHet8.jpg
This is my html and css code:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
font-family: Corbel;
}
#cssmenu {
width: auto;
height: 59px;
padding-bottom: 4px;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right ul li {
float: right;
margin-right: 0;
margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
position: absolute;
bottom: 0;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
height: 10px;
background: #0f71ba;
}
#cssmenu #bg-two {
height: 59px;
z-index: 2;
background: url('imgs/menuBG.png');
}
#cssmenu #bg-three {
bottom: 4px;
height: 55px;
z-index: 3;
background: #222222;
background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
background: -o-linear-gradient(top, #555555 0%, #222222 100%);
background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
bottom: 4px;
height: 55px;
z-index: 4;
background: url('imgs/menuBG.png');
}
#cssmenu ul {
height: 59px;
}
#cssmenu ul li {
float: left;
margin-right: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 5;
}
#cssmenu ul li a {
padding: 24px 30px 20px 30px;
margin-bottom: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #eeeeee;
font-size: 15px;
text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
background: #0f71ba;
background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
font-weight: bold;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
background: url('images/bg.png');
color: #ffffff;
}
Very simply, can be done with:
#cssmenu{
text-align:center;
}
#cssmenu ul, #cssmenu ul li{
display:inline-block;
}
Try to add text-align: center; to #cssmenu and display: inline-block; to #cssmenu ul.
Try using display:inline-block for the ul li instead of float left
#cssmenu ul{
text-align:center;
}
#cssmenu ul li{
float:left; //remove this
display:inline-block;
margin-right:0;
}
#cssmenu ul {
height: 59px;
text-align:center
}
#cssmenu ul li {
display:inline-block
margin-right: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 5;
}
remove float from #cssmenu ul li elements,add display:inline-block. and add tex-align center to: #cssmenu
You can use position:absolute and left: 30%
But it is recommended to insert the DIV in another div with position:relative attribute.
Another solution is to use <center> tags.
I want to create a horizontal menu dropdown, like this:
Home Menu 1 Menu 2 Menu 3 Menu 4
Sub Menu 11
Sub Menu 12
Sub Menu 13ssssssssssssssssssssssssssssssssssssss
Sub Menu 14
And each sub menu will display in one row, even if sub menu too long
Here's my code
Is thath what you're looking for?
http://jsfiddle.net/VUScp/44/
I just added some CSS, the HTML is intact...
/* CSS code */
#menu {
background: #333;
height: 30px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu > ul > li > a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: 154px;
}
#menu ul ul {
padding:0;
position: absolute;
top:100%;
left:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a{
background: #f0f0f0;
color: #333;
border:none;
width:100%;
}
#menu ul ul li a{
display:inline-block;
white-space:nowrap;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}
This may be your answer-http://jsfiddle.net/VUScp/22/
Use height and width auto.
Code i edited in your fiddle-
/* CSS code */
#menu {
background: #333;
height: auto;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: auto;
}
#menu ul ul {
padding:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block!important;
}
EDIT
GOT IT http://jsfiddle.net/VUScp/61/
#menu {
background: #333;
height:30px;
}
#menu ul {
margin:0;
padding:0;
}
#menu ul a {
text-decoration: none;
margin-right:150px; /* Use to adjust top menu width */
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px 12px;
}
#menu ul ul {
padding:0;
position:absolute;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
margin-right:0; /* Undo top menu width for sub menu */
min-width:160px; /* use to adjust sub menu minimum width */
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover, #menu ul li:hover ul li {
display:block !important;
}
A bit closer but not perfect:
http://jsfiddle.net/VUScp/14/
#menu {
background: #333;
height: 30px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
padding-right: 154px;
}
#menu ul ul {
padding:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}
use this code
html code
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
css code
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}