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; }
Related
On my website at twoguysplayingzelda.com, my sub-menus (desktop view) are currently displayed vertically and I would like to change it to horizontal. When a user hovers over the tab "GAMES", I would like the sub-menu to stretch horizontally almost like a 2nd menu bar with all the games. My menu CSS code is as below. Thanks for any help!
div.navigation.section.no-padding.bg-dark {
background: #616161;
}
.main-menu {
font-family: 'Arial', sans-serif;
font-size: 1.0em;
text-align: center;
}
.main-menu li { position: relative; }
.main-menu > li { float: left; }
.main-menu > li:before {
content: none;
display: block;
position: absolute;
right: 0;
top: 50%;
margin-top: -18px;
margin-right: -13px;
}
.main-menu > li:last-child:before { content: none; }
.main-menu > li > a {
display: block;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
font-size: 1.0em;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
}
.main-menu > li:first-child > a { margin-left: 0; }
.main-menu > .has-children > a,
.main-menu > .page_item_has_children > a { padding-right: 12px; position:
relative; }
.main-menu > .has-children > a::after,
.main-menu > .page_item_has_children > a::after {
content: "";
display: none;
border: 5px solid transparent;
border-top-color: #999;
position: absolute;
z-index: 1001;
right: 29px;
top: 50%;
margin-top: -2px;
}
.main-menu li:hover > a {
cursor: pointer;
background: #01B3D9;
color: #FFFFFF; }
.main-menu > .has-children:hover > a::after,
.main-menu > .page_item_has_children:hover > a::after { border-top-color:
#fff; }
/* Sub menus --------------------------------------- */
.main-menu li ul {
position: absolute;
z-index: 10000;
display: block;
left: -9999px;
top: 10px;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
z-index: 999;
-webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
}
.is_mobile .main-menu li ul {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
display: none;
}
.main-menu > li > ul { padding-top: 20px; }
.main-menu ul li {
float: none;
display: block;
border-top: 1px solid rgba(255,255,255,0.075);
}
.main-menu ul li:first-child { border-top: none; }
.main-menu ul > .has-children::after,
.main-menu ul > .page_item_has_children::after {
content: "";
color: #FFFFFF;
display: block;
border: 6px solid transparent;
border-left-color: rgba(255,255,255,0.4);
position: absolute;
z-index: 1001;
right: 10px;
top: 50%;
margin-top: -5px;
}
.main-menu ul > .has-children:hover::after,
.main-menu ul > .page_item_has_children:hover::after { border-left-color:
#fff; }
.main-menu ul li {
display: block;
width: 240px;
background: #616161;
}
.main-menu ul a {
width: 100%;
font-size: 1.0em;
background: #616161;
display: block;
text-align: left;
font-weight: 400;
padding: 3px;
padding-left: 12px;
line-height: 130%;
color: #FFFFFF;
}
.main-menu ul a:hover {
background: #01B3D9;
color: #FFFFFF;
}
.main-menu li:hover > ul {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
left: 138.25%;
margin-left: -120px;
top: 20.44px;
}
.is_mobile .main-menu li:hover ul { display: block; }
/* Deep down --------------------------------------- */
.main-menu ul li ul {
top: 5px;
}
.main-menu ul li:hover > ul {
top: 0;
left: 240px;
margin-left: 0;
}
.main-menu ul ul li { background: #3d3d3d; }
.main-menu ul ul ul li { background: #4d4d4d; }
.main-menu ul ul ul ul li { background: #4d4d4d; }
FYI, your games submenu will be too large to show horizontally.
Here's how you could do it though.
Delete this:
.main-menu li {
position: relative;
}
And add this
.main-menu li ul.sub-menu {
display: flex;
position: absolute;
left: 0;
right: 0;
overflow-x: auto;
margin: 0;
}
Should look like:
You can also add
.main-menu li ul.sub-menu {
flex-wrap: wrap;
}
Which will give you this:
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/
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 did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.
when i hover, its messed up as you can see in fiddle links i provided below
please take a look at this http://jsfiddle.net/wR5L5/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
position: relative;
display: inline;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
position: relative;
padding: 0;
}
.navigation ul li {
display: inline;
position: relative;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
float: left;
width: auto;
min-width: 100%;
background: #999;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
white-space: nowrap;
clear: both;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
display: block;
float: none;
width: 100%;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
Give width to the sub menu to get submenu wider than main menu.
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
width: 150px;
font-size: 13px;
}
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.