Настройте меню навигации, чтобы оно соответствовало дополнительной кнопке

Мне нужна помощь в добавлении дополнительной навигационной кнопки на главную панель навигации моего сайта. Это тема Woo Wordpress, если это поможет. Пытался изменить отступы в css безрезультатно. Когда я добавляю новую кнопку навигации под названием «Партнеры», последний пункт меню опускается на вторую строку, что выглядит не лучшим образом.

Это мой URL: http://kumbayah.com.au/

Это мой навигатор css:

/* 2.2 Navigation */
#navigation{font:14px/14px sans-serif;border-top:10px solid #dbdbdb; border-bottom:5px solid #dbdbdb;padding:15px 0; margin-bottom:30px;}

#navigation ul.rss{background:url(images/ico-rss.png) no-repeat right 5px;padding:1px 6px 3px 0;margin-right:10px;}
#navigation ul.rss li{display:inline;padding:0 10px 0 0;}
#navigation ul.rss li a{color:#c63f00;text-decoration:none;}
#navigation ul.rss li a:hover{text-decoration:underline;}

.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; margin-left:10px; }
.nav a  { position:relative; color:#555; display:block; z-index:100; padding:5px 10px; line-height:18px; text-decoration:none; }
.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#eee; }
.nav li li.current_page_item { background:none; }
.nav li  { float:left; width: auto; }
.nav li a.sf-with-ul { padding-right:20px; }
.nav li ul li a  { text-shadow:0 1px 0 #fff; }
.nav li ul li a { border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.nav a, .nav li.current_page_item, .nav li.current_page_parent, .nav li.current-menu-ancestor, .nav li.current-menu-item, .nav li.sfHover, .nav li.selected { border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

/* 2.2.1 Drop-down menus */
.nav li ul  { background: #FFF; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; }
.nav li ul li  { background:#eee; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb;}
.nav li ul li a  { width:160px; color:#555; font-size:0.8em; line-height:18px; }
.nav li ul li a.sf-with-ul { padding:5px 10px; }
.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul { background:#eaeaea;}
.nav li ul ul  { margin: -30px 0 0 180px; }
.nav li ul ul li a  {  }
.nav li ul li ul li a  {  }

.nav li:hover,.nav li.hover  { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; }

.nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:40%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* 2.2.2 Top Navigation (optional) */
#top { background: #000; }
#top .nav { margin:0; }
#top .nav a { color:#ddd; padding:8px 10px; line-height:18px; text-decoration:none; text-shadow:none; }
#top .nav li  {  }
#top .nav li a.sf-with-ul { padding-right:20px; }
#top .nav .sf-sub-indicator { top:40%; }

#top .nav a:hover, 
#top .nav li.current_page_item a, 
#top .nav li.current_page_parent a,
#top .nav li.current-menu-ancestor a,
#top .nav li.current-cat a,
#top .nav li.current-menu-item a,
#top .nav li.sfHover a { background: #222; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}

#top .nav li ul  { background: #222; margin:0; padding:0px; width: 180px; border: none; z-index:999;
    /* Box Shadow */
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
#top .nav li ul, #top .nav li ul li:last-child a {
    /* Border Radius */
    border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; 
}
#top .nav li ul li { background:none; border:none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
#top .nav li ul li a  { padding:8px 10px; width:160px; color:#ddd; background: none; font-size:0.9em;}
#top .nav li ul li a:hover  { background: #000; }
#top .nav li ul li a.sf-with-ul { padding-right:10px; }
#top .nav li ul ul  { margin: -34px 0 0 180px; }

#top .nav li:hover, #top .nav li.hover  { position:static; }
#top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
#top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
#top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
#top .nav li:hover ul, #top .nav li.sfhover ul,
#top .nav li li:hover ul, #top .nav li li.sfhover ul,
#top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
#top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul  { left:auto; }

Любая помощь будет замечательной.

Спасибо


wordpress css woothemes
person Justine    schedule 01.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваша проблема с этой строкой:

.nav li  { float:left; width: auto; }

Автоматическая ширина обычно работает довольно хорошо, но, как вы заметили, в узких местах могут возникнуть проблемы. Простое решение состоит в том, чтобы установить ширину либо для размещения каждого элемента li в соответствии с его фактической шириной, либо просто установить ширину на 11% следующим образом:

.nav li  { float:left; width: 11%; }

Я проверил 11% на вашем сайте, и он работает и выглядит хорошо для меня. Я бы предложил оптимизировать его, чтобы каждый элемент имел свою ширину в зависимости от того, насколько он на самом деле широк.

Удачи!

person Elad Stern    schedule 01.12.2013
comment
Спасибо Элад. Это вроде сработало. Мои ссылки в меню размещались на странице, но не так равномерно, и все вкладки оказались одного размера (довольно маленькими), поэтому некоторые из более длинных пунктов меню, например «Отзывы», располагались поверх цветных вкладок. Так что не ищите ничего хорошего :( Если вы можете придумать что-нибудь еще, это было бы здорово :) - person Justine; 01.12.2013
comment
Хорошо, просто перечитай свой ответ. Извините, это был долгий день! Как оптимизировать каждый элемент? Спасибо, извините, новичок во всем этом. - person Justine; 01.12.2013
comment
Как я уже сказал, вы должны определить их размер в соответствии с их фактической шириной около 11%. Таким образом, если у вас есть короткое слово (например, «дом»), оно должно занимать примерно 9 %, а более длинные слова — немного больше (возможно, до 13 %). Поиграйте с цифрами, и вы получите нужный результат. for :) Самый простой способ - установить ширину, встроенную в каждый элемент. - person Elad Stern; 01.12.2013
comment
Спасибо Элад, надо будет поиграть :) - person Justine; 01.12.2013