So I have picked a base theme in Weebly and have been completely changing it with my own CSS and HTML. I am trying to modify a horizontal navigation bar. The bar itself is centered, but the text inside the bar listing the pages (home, videos, design, resume, etc.) is not. Below I have included the CSS responsible for the navigation bar. Thank you for your help!
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}
#nav-wrap .container {
background:url(nav-bg-light.jpg) repeat-x top;
height:45px;
}
#nav-wrap .container ul {
list-style: none;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator-light.jpg) no-repeat right;
padding-right:2px;
}
#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul > li:first-child a:hover,
#nav-wrap .container ul span:first-child li a,
#nav-wrap .container ul span:first-child li a:hover{
border-radius:5px 0px 0px 5px;
}
#nav-wrap .container ul li a {
float: left;
display: block;
font-family: 'Rosario', sans-serif;
color: #262626;
padding: 0px 30px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 14px;
line-height:45px;
text-shadow: 0px -1px 0px #fff;
}
#nav-wrap .container ul li:hover {
background:url(nav-saperator-hover-light.jpg) no-repeat right;
}
#nav-wrap .container ul li a:hover {
background:url(nav-bg-hover-light.jpg) repeat-x top ;
}
#nav-wrap .container ul li:active {
background:url(nav-saperator-active-light.jpg) no-repeat right;
}
#nav-wrap .container ul li a:active {
background:url(nav-bg-active-light.jpg) repeat-x top ;
}
#nav-wrap .container ul li#active {
background:url(nav-saperator-current-light.jpg) no-repeat right;
}
#nav-wrap .container ul li#active a {
background:url(nav-bg-current-light.jpg) repeat-x top ;
}
I think you just need to add this:
#nav-wrap .container ul li a {
text-align:center;
}
#nav-wrap .container ul li a { ... }
I think this is where you want the text to be centered, it should be easy to do with
text-align:center;
Related
I had some help here getting multi-lined text in my main nav to center vertically but I'm having trouble getting the text in the sub nav to do the same. I've made a bit of a mess.
http://codepen.io/Compton/pen/icBDw/
#nav-wrap {
width:100%;
height:100px;
font-weight:500;padding: 0;
left:0;
font-family: 'Raleway', Arial, sans-serif;
}
#nav-wrap ul {
list-style-type: none;
margin: 0;
padding:0;
text-transform: uppercase;
}
#nav-wrap ul li {
width:14.275%; /* ~(100/7) */
display:block;
float:left;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav-wrap ul li a {
width:100%;
display: block;
height: 100%;
position: relative;
color:#FFFFFF !important;
text-decoration:none;
}
#nav-wrap ul li + li {
border-left: 1px #fff solid;
}
#nav-wrap ul li span {
display: inline-block;
vertical-align: middle;
height: 100px;
font-size:1.45em;
text-align: center;
padding: 0 5% 0 5%; /* was 0 20px */
line-height: 100px;
}
#nav-wrap ul li.yellow-facebook {
width:14.275%;
}
#nav-wrap ul li.yellow-facebook a {
background-size:130px 26px; /* > 25px */
}
#nav-wrap .doubleLine {
display: table-cell;
line-height: 1.2em;
width:65.275%;
}
li .subnav {
display: none;
position: absolute;
clear: both;
margin-left: 0;
/*font-size:0.9em;*/
}
.subnav ul {
margin-left: 0;
float:left;
padding:0;
width:100%;
}
.subnav ul li {
margin: 0 0 0 0;
height:42px;
}
.subnav ul li a {
padding: 5px 0 5px 0;/*
background-image: url(../images/submenu-background-divider.png);
background-repeat:no-repeat;
background-position:left;*/
}
.subnav ul li span {
display: inline-block !important;
vertical-align: middle !important;
height: 40px !important;
text-align: center !important;
padding: 0 0 0 0 !important; /* was 0 20px */
line-height: 1.1em !important;
font-size:0.9em !important;
}
.subnavul li span .doubleLine {
display: table-cell !important;
width:65.275% !important;
}
.subnav {
width:100%;
padding: 0;
margin: 0.05% 0 0 0;
}
#nav-wrap ul li.orange a {
background-color:#f37028;
}
#nav-wrap ul li.orange a:hover {
color: #231f20 !important;
}
#nav-wrap ul li.red a {
background-color:#ed1b24;
}
#nav-wrap ul li.red a:hover {
color: #231f20 !important;
}
#nav-wrap ul li.pink a {
background-color:#e54198;
}
#nav-wrap ul li.pink a:hover {
color: #231f20 !important;
}
#nav-wrap ul li.purple a {
background-color:#6b439c;
}
#nav-wrap ul li.purple a:hover {
color: #231f20 !important;
}
#nav-wrap ul li.blue a {
background-color:#0193cf;
}
#nav-wrap ul li.blue a:hover {
color: #231f20 !important;
}
#nav-wrap ul li.green a {
background-color:#80c02c;
}
#nav-wrap ul li.green a:hover {
color: #231f20 !important;
}
#nav-wrap ul li.yellow-facebook a {
background-color:#fff300;
background-image:url(../images/social-media/facebook-text.png);
background-repeat:no-repeat;
background-position:center;
}
#nav-wrap ul li.yellow-facebook a:hover {
color: #231f20;
background-image:url(../images/social-media/facebook-text_over.png);
}
.subnav ul li a:link, a:active, a:visited {
text-decoration:none;
}
.subnav ul li a:hover {
color:#000;
text-decoration:none;
}
li:hover > .subnav {display:inline-block; left:0;}
Adding display:table-cell; for the following like below
.subnav ul li span {
display: table-cell !important;
vertical-align: middle !important;
height: 40px !important;
text-align: center !important;
padding: 0 0 0 0 !important; /* was 0 20px */
line-height: 1.1em !important;
font-size:0.9em !important;
}
fixes the issue
I have a CSS menu using the following CSS.
What is the best way to center the whole menu on the page?
I have tried using another <div> outside <nav> and setting margins but its just aligning left all the time.
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
jsfiddle : http://jsfiddle.net/njuVm/
You can center the navigation bar by using the following CSS rules:
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0; /* << add this */
padding: 0; /* << add this */
display: inline-block; /* << add this */
vertical-align: top; /* << add this */
}
nav ul li {
float: left;
margin: 0; /* << add this */
padding: 0; /* << add this */
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
background-color: pink; /* optional... */
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/
The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.
Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.
Instead of floating the li, you can display them as inline-blocks.
Then, they will be centered relatively to the ul because of text-align: center.
Since the ul is as wide as the nav by default, the li will look like centered relatively to the nav.
nav {
text-align: center;
border: 1px solid black;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav li:hover > ul {
display: block;
}
nav > ul ul {
display: none;
position: absolute;
}
nav > ul ul > li {
border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
color: #666666;
}
<nav>
<ul>
<li>Add Contact</li>
<li>View Contact</li>
<li>Tickets
<ul>
<li><a>TEST1</a></li>
<li><a>TEST2</a></li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
First, when you float the ul's you have to clear the float by adding clear div:
HTML :
<div class="clear"></div>
CSS :
.clear{
clear:both;
}
And for centring the menu you should specify a width of the ul as in example and randomly I have set the width to 560px :
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
Take a Look:
http://jsfiddle.net/njuVm/6/
I know I've been asking a lot of questions and you guys have been great. There are two problems I'm having with my Nav.
1) First, the NAV isn't spanning the whole way.
2) For whatever reason, under "Services", the dropdown is spanning out long enough to fit all the links, but under "About Us", "Photo Credit" isn't.
Here's the link:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
It looks to me like your <nav> element actually is spanning the full width, but nav ul is not.
Remove display: inline-table; and it spans the full width. This should fix the "Photo Credit" link as well.
Remove the display: inline-table; from the nav ul. This should fix both problems. :)
How do I get my nav bar to span my web page? I have it set up to be 850px. The container div is set up to be 850px.
Here's the link and the code:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav {
width:850px;
}
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Your nav is 850px, however your black background ( ul ) is not.
To solve: Set the black background to nav instead.
The <ul> doesn't automatically fill the width of the 850-pixel container <div>. Set the <ul> width to 100% and it will.
ul {
width: 100%;
}
If having it 100% of the width of the container is what you want just assign the width of ul as 100%
I have a menu using SuperFish but the last 2 submenu's do not align up properly.
Here is my jsfiddle: http://jsfiddle.net/uP4bY/4/
My CSS looks like this:
/* Header/Navigation */
div#Nav {
background:transparent url(../Images/nav_Bg.png) no-repeat scroll top left;
height:70px;
width:980px;
margin:0 auto;
display:block;
position:relative;
z-index:2;
}
/*Level 1 or Parent / Destination*/
div#Nav ul {
padding-top:9px;
display:inline;
list-style-type:none;
margin:0;
}
div#Nav ul li {
background:transparent url(../Images/nav_li_Separator.png) no-repeat scroll center left;
padding-left:8px;
margin-left:8px;
display:inline;
position:relative;
}
div#Nav ul li.First {
background:none;
margin:0;
padding:0;
}
/*Level 2 Treks*/
div#Nav ul li ul {
left:10px;
position:absolute;
top:26px;
padding:0 !important;
z-index:100;
height:500px;
float:left;
list-style:outside;
width:auto;
}
/*Level 3 Everest Region*/
div#Nav ul li ul li ul {
float: left;
height: 500px;
left: 50px;
list-style: disc outside none;
padding: 0 !important;
position: absolute;
top: 30px;
width: auto;
z-index: 100;
}
/*Level 5 Everest Base Camp*/
div#Nav ul ul ul ul ul {
float: left;
height: 500px;
left: 50px;
list-style: disc outside none;
padding: 0 !important;
position: absolute;
top: 60px;
width: auto;
z-index: 100;
}
div#Nav ul li ul li {
border-top:1px solid #2f3b48;
border-right:1px solid #384857;
border-bottom:1px solid #384857;
height:24px;
display:block;
padding:5px 15px 0;
width:150px;
/*width:150px;*/
border-left:1px solid #384857;
margin:0 !important;
background:transparent url(http://www.kenticotemplates.net/themeforest/DreamTravel/Images/Nav_ul_li_Bg.png) repeat scroll top left !important;
}
div#Nav a, div#Nav a:link, div#Nav a:visited {
color:#7f8b98;
}
div#Nav a:hover, div#Nav a.selected {
color:#96b2cb !important;
text-decoration:none;
}
div#Nav ul#Links, div#Nav ul.nav {
float:left;
text-transform:uppercase;
}
div#Nav ul.Lang {
float:right;
}
div#Nav ul li {
float:left;
}
I am pretty certain i need to style the last ul li but when i do this it moves the previous ul li.
UPDATE: it should look like this minus the white space!
http://i48.tinypic.com/1zfpxqf.png
Solution of problem is her in fiddle : http://jsfiddle.net/7mvuw/
Demo: http://jsfiddle.net/7mvuw/embedded/result/
Note: I have changed the looks and feel but html structure is same, looks and feel for demo purpose you can adjust as per your requirement.
#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding-left:0;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}