I am having a hard time trying to center the navigation buttons on my website. I have searched and tried different options but havent found any success. Here is what my code looks like. PS - my code is from an elegant theme template.
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 3px solid #f7f7f7;
overflow: hidden;
}
#menu #main-menu {
float: none !important!;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav li {
float: left;
border-right: 1px dashed #dcdcdc;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav a, ul#mobile_menu a {
font-size: 12px;
color: #c6c6c6;
text-decoration: none;
text-transform: uppercase;
display: block;
height: 44px;
overflow: hidden;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
#menu .nav a > span {
padding: 12px 14px 11px;
}
#menu .nav ul li a > span {
padding: 0;
}
#menu .nav ul li {
border: none;
}
#menu .nav ul a, ul#mobile_menu a {
padding: 14px 5px 14px 25px;
height: auto;
overflow: visible;
width: 195px;
}
#menu .nav ul a:hover, ul#mobile_menu a:hover {
background: #4b93ad;
text-decoration: none;
}
span.menu_slide {
color: #fff;
background: #549eb9;
}
ul#mobile_menu a {
display: block;
padding-left: 5px;
padding-right: 5px;
width: auto;
}
#menu .nav > li.current_page_item > a:hover {
background: none;
color: #c6c6c6;
}
Try #menu {margin: 0 auto;}
OR
#menu {
float: left;
text-align: center;
}
#menu ul {
display: inline-block;
}
If you provide a link I can look at it for you.
Related
looking to get help on my navigation menu. please check it out at lofthairstudio.ie
its working ok but would like to have it centered in the middle of the page. have tried a few things but it will not move. float: right is the only one that moves the bar but obviously i want it centered.
.dropdown-menu {text-align: center; margin: 0; padding: 0; list-style: none;}
.dropdown-menu li { position: relative text-align: center;}
.dropdown-menu ul { position: absolute; nowhitespace: afterproperty; nowhitespace: afterproperty; nowhitespace: afterproperty; top: 100%; left: 0; z-index: 99; opacity: 0; visibility: hidden; transition: all .2s ease-in-out; margin: 10px 0 0 0; _margin: 0; /*IE6 only*/
text-align: center;
}
.dropdown-menu > li { float: left; display: block;text-align: center; }
.dropdown-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; }
.dropdown-menu a { display: block; position: relative; font-family: 'MyWebFont';}
.dropdown-menu ul ul { top: 0; left: 100%; }
.dropdown-menu > li ul { min-width: 150px }
.dropdown-menu ul ul li { width: 100% }
/* position arrows */
.nav-menu .icon-angle-down { position: absolute; right: 13px; top: 50%; font-size: 12px; margin-top: -6px; }
.nav-menu .icon-angle-right { position: absolute; right: 20px; top: 50%; font-size: 12px; margin-top: -6px; }
/*styling*/
.nav-toggle { display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -ms-user-select: none; user-select: none; }
#navbar {background: #E4DDC8; border-bottom: 2px solid #FFF; border-top: 2px solid #FFF; position: relative;
margin-bottom: 10px; }
.nav-menu { float: left; border-right: 0px solid rgba(0,0,0,1);
}
.nav-menu a { font-size: 20px; height: 50px; line-height: 50px; color:#000; padding: 0 8px; text-decoration: none;
font-weight: 700; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s
ease-in-out; transition: all 0.2s ease-in-out;}
.nav-menu li { float: left; position: relative; }
.nav-menu li.dropdown a { padding-right: 30px }
.nav-menu > li > a {border-right: 1px solid #000; border-left: 0px solid rgba(0,0,0,1); margin-top: 5px;
margin-bottom:5px;}
.nav-menu > li:first-child { border-left: none }
.nav-menu li:first-child > a, .dropdown-menu li:first-child > a:hover { border-left: none }
.nav-menu > li > a:hover, .nav-menu > .current-menu-item > a, .navigation .current-menu-parent > a, .navigation
.current-menu-parent > a:hover, .nav-menu > .current-menu-item > a:hover { color: #000; background: #E4DDC8;}
/*drop-down styles*/
.nav-menu ul { margin: 0; background: #E4DDC8; width: 190px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); }
.nav-menu ul li { float: none; display: block; border-left: none; border-right: none; margin: 0; }
.nav-menu ul li:first-child { border-top: 0 }
.nav-menu ul li:last-child { border-bottom: 0 }
.nav-menu a { display: block; position: relative; text-align: center; }
.nav-menu .sub-menu li.current_page_item > a { color: #fff; background-color: #E4DDC8; }
.nav-menu ul a { display: block; padding: 10px; }
.nav-menu ul li { border-bottom: 0px solid rgba(255,255,255, 0.1); border-top: 0px solid rgba(0,0,0,1); }
.nav-menu ul a { color: #000; padding: 17px 15px; height: auto; text-align:left; margin: 0px; border: 0px; line-height:
.nav-menu li{ float:none; display:inline-block; }
I have this nested menu, where everything works fine expect from the third hierarchy level.
I have the code and the result here: http://jsfiddle.net/wvsL9/
If you hover the menu: "PRODUKTER" and then "PRIVAT", you see the problem with the width is not "auto".
I am really stuck here, and I have tried a lot of variations.
Can you find out why it doesn't work as I want?
Thanks in advance
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9em;
font-family:'Helvetica Neue For BBC W01 Bd';
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
display: inline-block;
position: relative;
}
#menu li:last-child {
border: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu a {
display: inline-block;
padding: 50px 8px;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#menu li:hover > a {
background: #000;
color: #fff;
}
#menu li.current-menu-item a{
background: #000;
color: #FFF;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
width: 100%;
top: 120px;
left: 0;
z-index: 1;
background: #000;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul li {
position: static;
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding-top: 10px;
padding-bottom: 10px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
#menu ul a:hover {
background-color: #f60c0c;
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
}
#menu ul ul {
top: 0;
left: 100%;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#menu ul ul li{
display: block;
width: auto;
float: none;
}
#menu ul ul li a{
display: block;
padding: 10px 50px;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
You can work with width: auto; on the correct element. Just add this:
#menu ul ul {
width: auto;
}
JSFiddle example
Add this css
#menu .sub-menu{width:auto; min-width:100%;}
Here is example
http://jsfiddle.net/wvsL9/3/
http://profiledt.co.uk/SetTraining
the tag has the menu inside it, however I can't seem to get it to allow the drop down to appear infront of the slider in IE8.
.main-navigation {
width: 100% !important;
}
.main-navigation a {
font-size: 12px;
height: 50px;
line-height: 50px;
color: #fff !important;
padding: 0 25px;
text-decoration: none;
font-weight: 700;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.main-navigation a:hover {
color: #fff!important;
background: #008AE6;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.nav-menu {
/* background: #008AE6 !important; */
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
/* CUSTOM CODE */
background: #1f4e9b;
/*border-bottom: 5px solid #eee; */
position: relative;
z-index: 103;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background: ;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
//Margin makes nav out of place
margin: 0 40px 0 0;
/*margin: 0 2.857142857rem 0 0;*/
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 200; /*importance*/
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #2989ff;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #3d9dff;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
z-index: 9999;
}
.menu-toggle {
display: none;
}
I'm using a Windows XP machine with Internet Explorer 8.
Thanks
z-index will not work on a static element (default). They must be relative or absolute.
Try to add positon:relative; on the elements with it.
The title says it all, I want to remove the search icon from the menu bar and replace it simple with the word "Search"
My style.css looks like this:
.site-header .search-field {
background-color: transparent;
/*background-image: url(images/search-icon.png);*/
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
z-index: 1000;
}
And nowhere else in any file can I find a link to the search-icon.png image.
The last screenshot shows that the search box has dropped down. How can I position it in line horizontally with the other menu items, as far off to the right as the menu will allow?
The CSS used to produce the nag-menu is:
/**
* 4.2 Navigation
* ----------------------------------------------------------------------------
*/
.main-navigation {
z-index: 1000;
clear: both;
margin: 0 auto;
/*max-width: 1920px;*/
max-width: 1080px;
min-height: 45px;
position: relative;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
color: #3c3c3c;
display: block;
font-size: 15px;
/*line-height: 1;*/
/*padding: 15px 20px;*/
text-decoration: none;
}
.nav-menu li:hover > a,
.nav-menu li a:hover {
/*background-color: #220e10;*/
/*background-color: #333333;*/
color: #666;
}
.nav-menu .sub-menu,
.nav-menu .children {
/*background-color: #220e10;*/
background-color: #ffffff;
/*border: 2px solid #f7f5e7;*/
border: 2px solid #ffffff;
border-top: 0;
display: none;
padding: 0;
position: absolute;
left: -2px;
z-index: 1000;
box-shadow: 0 0 8px rgba(0,0,0,.3);
top: 100%;
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
color: #3c3c3c;
margin: 0;
width: 200px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
/*background-color: #db572f;*/
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
/*background-color: #666;*/
color: #666;
/*font-style: italic;*/
}
/* Arrow underneath */
/*
.nav-menu .current_page_item > a:after,
.nav-menu .current_page_ancestor > a:after,
.nav-menu .current-menu-item > a:after,
.nav-menu .current-menu-ancestor > a:after {
width: 0;
height: 0;
position: absolute;
content:"";
display:block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #666;
left: 50%;
margin-left: -6px;
}
*/
.menu-toggle {
display: none;
}
/* Navbar */
.navbar {
/*background-color: #f7f5e7;*/
/*background-color: #fff;*/
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
.site-header .search-form {
position: absolute;
right: 20px;
}
.site-header .search-field {
background-color: transparent;
/*background-image: url(images/search-icon.png);*/
/*background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;*/
border: none;
cursor: pointer;
/*height: 37px;*/
margin: 0 auto;
/*padding: 0 0 0 34px;*/
position: relative;
/*-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;*/
/*width: 0;*/
width: 120px;
min-height: 45px;
z-index: 1000;
}
.site-header .search-field:focus {
/*background-color: #fff;*/
/*border: 2px solid #c3c0ab;*/
/*border: 1px solid #666666;*/
cursor: text;
outline: 0;
color: #666666;
/*width: 230px;*/
}
EDIT:
All you honestly have to do is change the width to about >100px and remove the background-img. That will show the placeholder text and when you click on it, it'll launch the animation like before.
I would like to keep the parent hover color the same when navigating the secondary menu.
I looked at a few other answers such as here and here, but I was unable to figure it out.
Here is a video explaining what I would like to accomplish: http://screencast.com/t/Bhfj6mtZkPZp
Here is the navigation code:
.primary-navigation {
max-width: 1192px;
margin: 20px 0px 52px 1px;
}
.primary-navigation ul {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
margin: 0;
padding: 0;
list-style: none;
}
.primary-navigation ul li {
display: block;
position: relative;
float: left;
}
.primary-navigation li ul {
display: none;
}
.primary-navigation ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #ec6397;
padding: 12px 22px 17px 22px;
white-space: nowrap;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
border-right: 1px solid #f39cbd;
}
.primary-navigation ul li a:hover {
background: #f39cbd;
}
.primary-navigation li:hover ul {
display: block;
position: absolute;
border-top: 1px solid #f39cbd;
border-left: 1px solid #f39cbd;
}
.primary-navigation li:hover li {
float: none;
width: 300px;
z-index: 3;
border-bottom: 1px solid #f39cbd;
}
.primary-navigation li:hover a {
background: #ec6397;
}
.primary-navigation li:hover li a:hover {
background: #f39cbd;
color: #000;
}
You hould be able to change this
.primary-navigation ul li a:hover {
background: #f39cbd;
}
to this
.primary-navigation ul li:hover a {
background: #f39cbd;
}
This way the color of your main nav item is changed when you hover over the parent li. Since the submenu should also be inside this li, the hover will still be triggered when moving over the submenu, an so the color of the link should also keep it's hover state.