Мне нужна помощь относительно моего меню. Я использую Wordpress на своем сайте, с темой Vantage, которую я даже купил премиум-тему.Центр меню Wordpress выравнивается и равномерно распределяется
Моя проблема заключается в следующем: я хотел бы, чтобы мои пункты меню были центрированы, равномерно распределены, и я не могу достичь этого, не испортив свои подменю.
Вот что я пытался до сих пор, но безуспешно: https://stackoverflow.com/a/14103766/3990536 http://icode4you.net/wordpress-tricks-create-an-automatically-centered-and-evenly-spaced-navigation-menu/ https://stackoverflow.com/a/16274725/3990536
коды на самом деле работают; мое меню получает выравнивание niceley, но оно также влияет на мое подменю, я полагаю, потому что они используют один и тот же класс. Я не могу понять, как определить для них новый класс, или отделить подменю от фактического главного меню.
Что я здесь не понимаю, это связь между моими подменю и главным меню. Если я отредактирую .main-navigation li, мое подменю также будет затронуто, даже жесткий должен быть отдельный li для моего основного и моего подменю.
Мой сайт следующим образом: CSS http://classwebdesign.hu/testing/
мое меню выглядит следующим образом:
/* =Menu
----------------------------------------------- */
.main-navigation{
margin:0 -35px;
background:#343538;
font-size:1em;
position:relative;
text-transform:uppercase;
letter-spacing: 0.08em;
/* Font awesome icons */
/* General menu link styling */
/* For when the menu becomes a sticky menu */
}
.main-navigation [class^="icon-"]{
display:inline-block;
margin-right:15px;
font-size:16px;
line-height:0.5em;
color:#CCCCCC;
}
.main-navigation a:hover [class^="icon-"]{
color:#FFFFFF;
}
.main-navigation ul{
list-style:none;
margin:0;
padding-left:0;
zoom:1;
/* Second level menu items */
}
.main-navigation ul:before{
content:'';
display:block;
}
.main-navigation ul:after{
content:'';
display:table;
clear:both;
}
.main-navigation ul li{
display:block;
position:relative;
float:left;
}
.main-navigation ul li:hover > a{
background:#00bcff;
color:#FFFFFF;
}
.main-navigation ul li a{
padding:20px 35px;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.main-navigation ul li a,.main-navigation ul li a > *{
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.main-navigation ul ul{
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);
box-shadow:0 1px 2px rgba(0,0,0,0.15);
background:#464646;
display:none;
position:absolute;
top:100%;
left:0;
z-index:99999;
/* Third Level Items */
}
.main-navigation ul ul a{
width:200px;
padding:15px 20px;
}
.main-navigation ul ul li{
position:relative;
/* Hovering over 2nd level items */
}
.main-navigation ul ul li:hover > a{
background:#00bcff;
color:#FFFFFF;
}
.main-navigation ul ul ul{
left:100%;
top:0;
margin-left:0;
}
.main-navigation ul li:hover > ul{
display:block;
}
.main-navigation a{
display:block;
text-decoration:none;
color:#e2e2e2;
font-weight:bold;
}
.main-navigation.sticky{
-webkit-box-shadow:0 2px 1px rgba(0,0,0,0.15);
-moz-box-shadow:0 2px 1px rgba(0,0,0,0.15);
box-shadow:0 2px 1px rgba(0,0,0,0.15);
}
body.has-menu-search .main-navigation ul{
margin-right:59px;
}
/* Handle the navigation slightly differently on mobile devices */
body.mobile-device .main-navigation ul ul{
display:none;
}
body.mobile-device .main-navigation li:hover > ul{
display:block;
}
.mobile-nav-frame [class^="icon-"]{
display:inline-block;
margin-right:10px;
min-width:1em;
}
.mobile-nav-icon{
font-family:'FontAwesome';
display:inline-block;
margin-right:10px;
}
.mobile-nav-icon:before{
font-size:14px;
content:"\f00b";
}
#search-icon{
position:absolute;
top:0;
right:0;
height:100%;
}
#search-icon #search-icon-icon{
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:relative;
display:block;
cursor:pointer;
background-color:#303134;
width:59px;
height:100%;
}
#search-icon #search-icon-icon,#search-icon #search-icon-icon .icon-search{
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
}
#search-icon #search-icon-icon .icon{
position:absolute;
display:block;
width:17px;
height:17px;
top:50%;
left:50%;
margin-top:-8px;
margin-left:-8.5px;
background: url('images/sprites-1-2.png') no-repeat -102px 0;
}
#search-icon #search-icon-icon:hover{
background-color:#00bcff;
}
#search-icon #search-icon-icon:hover .icon{
background: url('images/sprites-1-2.png') no-repeat 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#search-icon #search-icon-icon .icon{
background: url(images/retina/search-icon.png) no-repeat;
background-size:17px 17px;
}
#search-icon #search-icon-icon:hover .icon{
background: url(images/retina/search-icon-white.png) no-repeat;
background-size:17px 17px;
}
}
#search-icon .searchform{
display:none;
position:absolute;
top:100%;
right:0;
width:1080px;
background:#2d2e31;
z-index:10;
overflow-x:hidden;
}
#search-icon .searchform input[name=s]{
color:#d1d1d1;
font-size:17px;
font-weight:200;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:block;
width:100%;
height:42px;
border:none;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
background:transparent;
outline:none;
padding:0 15px;
}
Спасибо за вашу помощь заранее!
EDIT: с ответом ниже я смог выровнять их по центру, но они не равномерно распределены, что было бы очень важно для меня. Благодаря!
Спасибо за вашу помощь, мое меню теперь красиво центрировано по центру, но оно не равномерно разнесено. Я хочу, чтобы все мои элементы меню были одинаковой ширины. Я мог бы добиться этого с помощью этого фрагмента кода: http://stackoverflow.com/a/14103766/3990536 Но после этого мои подменю были уложены друг на друга и в одной строке и в полном беспорядке. – tru23
То, что я всерьез не могу понять, - это то, почему моя .main-navigation li влияет на мое основное меню и BOTH мое подменю. Почему у меня нет другого класса для них, и если я этого не сделаю, как я могу его создать? Я был бы очень благодарен за это. – tru23