Центр меню Wordpress выровнен и расположен равномерно
Мне нужна помощь в отношении моего меню. Я использую Wordpress на своем сайте, с темой Vantage, которую я даже купил премиум-темой.
Моя проблема заключается в следующем: я хотел бы расположить пункты меню по центру, расположить их равномерно, и я не могу этого достичь, не испортив подменю.
Вот что я попробовал до сих пор, но безуспешно: /questions/8824751/kak-ravnomerno-i-polnostyu-rastyanut-fiksirovannoe-kolichestvo-elementov-gorizontalnoj-navigatsii-po-ukazannomu-kontejneru/8824766#8824766 http://icode4you.net/wordpress-tricks-create-an-automatically-centered-and-evenly-spaced-navigation-menu/ /questions/3503965/css-rastyanutoe-i-ravnomerno-raspolozhennoe-gorizontalnoe-menyu/3503980#3503980
Коды на самом деле работают; мое меню выравнивается, но это также влияет на мои подменю, я полагаю, потому что они используют один и тот же класс. Я не могу понять, как определить новый класс для них, или отделить подменю от фактического главного меню.
Вещь, которую я здесь не понимаю, это связь между моими подменю и главным меню. Если я отредактирую.main-navigation li, это повлияет и на мое подменю, даже если должно быть отдельное li для моего основного и моего подменю.
Мой сайт выглядит следующим образом: http://classwebdesign.hu/testing/
CSS моего меню выглядит так:
/* =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;
}
Заранее спасибо за помощь!
РЕДАКТИРОВАТЬ: С ответом ниже я смог выровнять их по центру, но они не расположены равномерно, что также было бы очень важно для меня. Спасибо!
1 ответ
Посмотрите на такие ответы на сайте;
Выровнять центральное меню внутри div
Это простой способ достижения того, что вы хотите, не портя подменю. Удалить поплавок из li и установить их display собственность на inline-block, Затем установите text-align: center на родительском ul;
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
zoom: 1;
text-align: center;
}
.main-navigation ul li {
display: block;
position: relative;
/* float: left; */
display: inline-block;
}