Перейти к содержимому


Изменение Размеров Верхнего Меню


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 Dasik851

Dasik851

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 87 сообщений

Отправлено 27 Март 2018 - 22:07

Добрый день!
Сайт SL-447401
Подскажите как расположить эти пункты меню горизонтально и задать им размеры?
Спасибо!

Прикрепленные изображения

  • Меню горизонтально.png


#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 750 сообщений

Отправлено 28 Март 2018 - 20:16

Просмотр сообщенияDasik851 (27 Март 2018 - 22:07) писал:

Добрый день!
Сайт SL-447401
Подскажите как расположить эти пункты меню горизонтально и задать им размеры?
Спасибо!

Здравствуйте.
В шаблоне HTML найдите код:
			  <!-- BEGIN: Main Navigation -->
			  <div id="mainnav" class="col-md-10">

Замените на:
			  <!-- BEGIN: Main Navigation -->
			  <div id="mainnav" class="col-md-12">

В шаблоне main.css найдите код:
#custommenu {z-index:1;width: 280px;display:inline-block;}
/* Меняем высоту меню ------------------------------------------------------   */

Замените на:
#custommenu {z-index:1;display:inline-block;}
/* Меняем высоту меню ------------------------------------------------------   */


#3 Dasik851

Dasik851

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 87 сообщений

Отправлено 28 Март 2018 - 20:56

Так было. Дело в том, что тогда пункты вытягиваются в длину и располагаются в несколько строк, потому что не влезают в ширину монитора (из-за длинных названий).
Поэтому я пытаюсь их сделать прямоугольными блоками, чтобы слова переносились, и сами блоки были ограничены по ширине.
Но они (эти блоки) почему-то никак не хотят у меня располагаться на одном уровне.

#4 Dasik851

Dasik851

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 87 сообщений

Отправлено 02 Апрель 2018 - 17:13

Чё, не поможет никто?

#5 metry

metry

    Активный участник

  • Модераторы
  • 585 сообщений

Отправлено 02 Апрель 2018 - 18:00

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:

#custommenu ul.mainnav li.level0 > a {display: inline-block;padding: 10px 30px; font-size: 120%;font-weight: 700;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;color: #FFF;border: 1px solid transparent;}

замените на:
#custommenu ul.mainnav li.level0 > a {display: inline-block;padding: 10px 30px; font-size: 120%;font-weight: 700;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;color: #FFF;border: 1px solid transparent;height:150px;vertical-align:middle;}

далее найдите:

#custommenu ul.mainnav li.level0 {width: 200px;height: 165px;display:inline-block;border: none;position: static;text-align: left;padding: 5px 12px 0 12px;}

замените на:

#custommenu ul.mainnav li.level0 {width: 200px;height: 170px;display:inline-block;border: none;position: static;text-align: left;padding: 5px 12px 0 12px;}


#6 Dasik851

Dasik851

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 87 сообщений

Отправлено 02 Апрель 2018 - 18:53

Да, работает, но при переводе фокуса мыши с пункта на пункт, высота всего меню скачет.
И как выровнять текст каждого пункта по вертикали в середину?

Спасибо!

#7 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 673 сообщений

Отправлено 03 Апрель 2018 - 13:06

Просмотр сообщенияDasik851 (02 Апрель 2018 - 18:53) писал:

Да, работает, но при переводе фокуса мыши с пункта на пункт, высота всего меню скачет.
И как выровнять текст каждого пункта по вертикали в середину?

Спасибо!
Здравствуйте, найдите в файле main.css код
#custommenu ul.mainnav li.level0 {width: 200px;height: 170px;display:inline-block;border: none;position: static;text-align: left;padding: 5px 12px 0 12px;}
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {height: 165px; color: #FFF;background-color: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.3);}
#custommenu ul.mainnav li.level0:first-child {padding-left: 0;}

/*  ЗДЕСЬ МЕНЯЕТСЯ РАЗМЕР ШРИФТА ГЛАВНОГО МЕНЮ В ШАПКЕ САЙТА -----------------------	 */
/*																				 I	 */
/*																				 V	 */
#custommenu ul.mainnav li.level0 > a {display: inline-block;padding: 10px 30px; font-size: 120%;font-weight: 700;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;color: #FFF;border: 1px solid transparent;height:150px;vertical-align:middle;}


замените на

#custommenu ul.mainnav li.level0 {width: 200px;min-height: 170px;display:inline-block;border: none;position: static;text-align: left;padding: 5px 12px 0 12px;}
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {height: 165px; color: #FFF;background-color: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.3);}
#custommenu ul.mainnav li.level0:first-child {padding-left: 0;}

/*  ЗДЕСЬ МЕНЯЕТСЯ РАЗМЕР ШРИФТА ГЛАВНОГО МЕНЮ В ШАПКЕ САЙТА -----------------------	 */
/*																				 I	 */
/*																				 V	 */
#custommenu ul.mainnav li.level0 > a {display: inline-block;padding: 10px 30px; font-size: 120%;font-weight: 700;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;color: #FFF;border: 1px solid transparent;vertical-align: middle;	min-height: 170px;}


#8 Dasik851

Dasik851

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 87 сообщений

Отправлено 03 Апрель 2018 - 21:32

Ребяты, спасибо !!! Получилось.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных