1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Что сужает ширину пункта меню в мобильной версии?

Главные вкладки

Аватар пользователя alexo alexo 5 декабря 2018 в 16:37

Здравствуйте! Использую nice menu + responsive bartik + дополнительные файлы CSS для меню.
Пункт меню сужается в мобильной версии,

чего не наблюдалось до добавления своего CSS файла.
(так выглядит при выключении дополнительного файла css)

Что могло в CSS к этому привести?
Пробую менять % на размер в em, уменьшаю всякие paddings, но все равно.
На что еще смотреть?
Я предполагаю, что это где-то в этой части

#block-nice-menus-2{
        z-index: 99
}

#block-nice-menus-2 ul{
        margin-bottom:5px;     
        width: 100%;   
}

#block-nice-menus-2 ul a{
  padding: 12px;
  color: #000;
  font-size: 18px;
  display: inline-block;    
  width:90%  
}

#block-nice-menus-2 ul li{
        margin-right: 7px;
        text-align: center;
        width: 19%;
        border-radius: 10px;           
}

Как это исправить?
Или придется все же в шаблоне править?

В самом nice menu такой код:

/******************************
 Global CSS for ALL menu types
******************************/

ul.nice-menu,
ul.nice-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;  
}

ul.nice-menu li {  
  border-top: 0;
  float: left; /* LTR */  
}

ul.nice-menu a {
  padding: 0.3em 5px 0.3em 5px;
  color: #EBEDF2;
}

ul.nice-menu ul {
  top: 1.8em;
  left: -1px; /* LTR */
  border: 0;  
  margin-right: 0; /* LTR */
}

ul.nice-menu ul li {
  width: 12.5em;
}

/******************************
 HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
  float: left; /* LTR */
  border: 0;
}

ul.nice-menu-down li {
 
}

ul.nice-menu-down li li {
  border-top: 0;
}

ul.nice-menu-down ul {
  left: 0; /* LTR */
}

ul.nice-menu-down ul li {
  clear: both;
}

ul.nice-menu-down li ul li ul {
  left: 12.5em; /* LTR */
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-right: 15px; /* LTR */
}

ul.nice-menu-down li.menuparent {
  background: url("../images/arrow-down.png") right center no-repeat; /* LTR */
}

ul.nice-menu-down li.menuparent:hover {
  background: url("../images/arrow-down.png") right center no-repeat; /* LTR */
}

ul.nice-menu-down li li.menuparent {
  background: url("../images/arrow-right.png") right center no-repeat; /* LTR */
}

ul.nice-menu-down li li.menuparent:hover {
  background: url("../images/arrow-right.png") right center no-repeat; /* LTR */
}

Лучший ответ

Аватар пользователя ivnish ivnish 6 декабря 2018 в 8:55
1

Посмотрел ваш сайт. Меню плющит вот этот стиль:

#block-nice-menus-2 ul li {
    width: 19%;
}

Принудительно задается ширина. Можно для малых экранов (до 768px) сделать width: 100%

Комментарии

Аватар пользователя ivnish ivnish 5 декабря 2018 в 16:40
1

Вряд ли придётся править шаблон. Но и так помочь тяжело будет. Нужно смотреть инспектор браузера и пробовать

Аватар пользователя Orion76 Orion76 5 декабря 2018 в 21:20
1

Если сайт не доступен для анализа "извне" есть простой но эффективный метод научного тыка-)
На самом деле - без шуток.

Алгоритм прост:
1.Убираете файл, который портит верстку.
2.Делаете 2 копии этого файла, к каждой из которых примерно ровно половина css-правил.
3.Поочереди подставляете эти файлы вместо оригинала.
4.Если файл не портит верстку, то удаляете его, а второй опять делите пополам и проверяете каждую часть (назад в п.3)
5.Пока в конечном файле не останется одно правило, оно-то все и портит-)

Если даже у Вас около 1000 "подозреваемых" правил, Вам достаточно будет повторить всего 10 (квадратный корень из 1000) итераций пп.3-4 алгоритма.

Аватар пользователя Orion76 Orion76 6 декабря 2018 в 0:53

ага.. вот только с квадратным корнем я переборщил, на самом деле количество итераций равно двоичному логарифму из числа правил-)

Аватар пользователя alexo alexo 6 декабря 2018 в 2:12

Сайт закрыт от поисковиков паролем. Логин для просмотра сайта admin, пароль 123qwe. Или сами файлы тоже нужны?

Аватар пользователя ivnish ivnish 6 декабря 2018 в 8:55
1

Посмотрел ваш сайт. Меню плющит вот этот стиль:

#block-nice-menus-2 ul li {
    width: 19%;
}

Принудительно задается ширина. Можно для малых экранов (до 768px) сделать width: 100%

Аватар пользователя alexo alexo 6 декабря 2018 в 13:39

Спасибо. Да, исправление этого стиля решило проблему.
1)Первый вариант:
Я использую немного упрощенный способ, который для меня оказался проще:
все оставляю в процентах, как было, и только для #block-nice-menus-2 ul li указываю в пикселях ширину для всех устройств. Вроде пока работает и на ПК, и на мобильном, и даже пункты меню выстраиваются один под одним при сужении.

#block-nice-menus-2 ul li{
        margin-right: 7px;
        text-align: center;
        width: 13em;
        border-radius: 10px;   

2)Более правильно, я так понимаю, прописать отдельный стиль,
но у меня этот способ не работает (вероятно, неправильно указываю)
я пишу

@media only screen and (max-device-width: 768px) {
   #block-nice-menus-2 ul li{
        width: 100%;

    }
}

3)Или отдельным файлом
Т.е. создаю файл mymobile.css
в нем пишу

#block-nice-menus-2 ul li{
        margin-right: 7px;
        text-align: center;
        width: 100%;

И в head указываю
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Только в каком файле?
В какой файл нужно внутри нужно поместить указание на название файла с css для мобильных?