Перейти к содержанию

Ширина Главного меню


 Поделиться

Рекомендуемые сообщения

Нужна помощь в решении вроде бы простой проблемы.

Меняю вид главного меню (навигации) на сайте

274344479_2022-09-1311-39-33.thumb.png.38f5aa2bad35c7ae741619597e52e7c6.png

Поиск в меню мне не нужен и для этого я удалил в шаблоне navBar строку {template="quickSearch" group="global" app="core" params="$preview"},но обнаружилось что тогда пункты меню ,которые "не поместились" на ширину сайта,не прячутся под кнопку Больше а переносятся на другую строку

1983586090_2022-09-1311-39-01.thumb.png.5fa52e7cc3e8cc680a438d92d55af1c8.png

Как решить эту проблемку,чтобы и меню было на всю ширину и при этом непоместившиеся пункты меню прятались под кнопку Больше ?

 

 

 

Ссылка на комментарий
Поделиться на другие сайты

Здравствуйте, вам нужно обратиться к автору темы.

Ссылка на комментарий
Поделиться на другие сайты

Кирилл К разработчикам IPS :) ? Тема дефолтная.

Ссылка на комментарий
Поделиться на другие сайты

Какие будут предложения куда копать чего менять и т.п?

Ссылка на комментарий
Поделиться на другие сайты

Что-то не припомню это меню, где оно располагается? 

Ссылка на комментарий
Поделиться на другие сайты
8 часов назад, Кирилл сказал:

Что-то не припомню это меню, где оно располагается? 

Это обычное стандартное ,в чистой установке движка,меню.

Дефолтный шаблон navBar

{{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}
	<nav data-controller='core.front.core.navBar' class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>
		<div class='ipsNavBar_primary ipsLayout_container {{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}}'>
			<ul data-role="primaryNavBar" class='ipsClearfix'>
				{template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"}
				<li class='ipsHide' id='elNavigationMore' data-role='navMore'>
					<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore' id='elNavigationMore_dropdown'>{lang="more"}</a>
					<ul class='ipsNavBar_secondary ipsHide' data-role='secondaryNavBar'>
						<li class='ipsHide' id='elNavigationMore_more' data-role='navMore'>
							<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_more' id='elNavigationMore_more_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
							<ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_more_dropdown_menu' data-role='moreDropdown'></ul>
						</li>
					</ul>
				</li>
			</ul>
{template="quickSearch" group="global" app="core" params="$preview"}
      </div>
	</nav>
{{elseif member.group['g_view_board'] and !\in_array('ipsLayout_minimalNoHome', \IPS\Output::i()->bodyClasses )}}
	<nav>
		<div class='ipsNavBar_primary ipsLayout_container ipsNavBar_noSubBars'>
			<ul data-role="primaryNavBar" class='ipsResponsive_showDesktop ipsClearfix'>
				<li>
					<a href='{setting="base_url"}' title='{lang="go_community_home"}'><i class='fa fa-angle-left'></i> {lang="community_home"}</a>
				</li>
			</ul>
		</div>
	</nav>
{{endif}}

в котором подключается шаблон поиска ( {template="quickSearch" group="global" app="core" params="$preview"} ) и на сайте выглядет так

316321280_2022-09-1410-15-13.thumb.png.cde36ace912f4fbd96e5ec0ebdf09ef2.png

Если в navBar удалить {template="quickSearch" group="global" app="core" params="$preview"} ,то меню выглядет так

407180564_2022-09-1410-15-43.thumb.png.773a4a9c431af20732e6d43133d6539c.png

И вот как решить проблему чтобы без поиска выглядело так

64807425_2022-09-1410-32-10.thumb.png.3485f330e90929537a65550665e9e573.png

Ссылка на комментарий
Поделиться на другие сайты

То есть чтобы пункты меню,которые не поместились в ширину ,"прятались" под кнопку Больше.

Ссылка на комментарий
Поделиться на другие сайты

Если через CSS скрыть поиск?

#elSearchWrapper{
  display:none;
}

 

Я на одном из своих сайтов скрыл именно через CSS и кнопка больше отображается нормально.

Изменено пользователем TemKa_SD
Ссылка на комментарий
Поделиться на другие сайты

TemKa_SD сss-способы естественно сразу же испытал,без результата

1330612736_2022-09-1510-08-56.thumb.png.24d755c5ea723a228daeb9e8a0cb2f83.png

Опытным путем,т.е методом тыка, выявил что на корректность отображения влияет id="elSearch",а вот почему хз.Почему-то еще и Кирилл молчит....

Мне необходимо чтобы выглядело так (фотомонтаж)

64807425_2022-09-1410-32-10.thumb.png.3485f330e90929537a65550665e9e573.png.536cff9193dc71fde4d6314f076f0820.png

Изменено пользователем Александр Христич
Ссылка на комментарий
Поделиться на другие сайты

Яваскрипт на лету рассчитывает размер элементов в строке навигации и корректирует поведение меню в зависимости от расстояний. 

Ссылка на комментарий
Поделиться на другие сайты
13 минут назад, Кирилл сказал:

Яваскрипт на лету рассчитывает размер элементов в строке навигации и корректирует поведение меню в зависимости от расстояний. 

А "подкорректировать" это как-то можно?

Ссылка на комментарий
Поделиться на другие сайты

В custom.css:

#elSearchWrapper {display: none;}
#elSearch {
    width: 0;
}

 

Ссылка на комментарий
Поделиться на другие сайты
8 минут назад, Кирилл сказал:

В custom.css:

#elSearchWrapper {display: none;}
#elSearch {
    width: 0;
}

 

Уже пробывал,без результата,ширина меню остается таким же, а на месте поиска пустое место

947597480_2022-09-1514-04-43.thumb.png.755d2faada2e17312a6569f7705ed00f.png

Не расширяется меню,хоть тресни епрст....

Ссылка на комментарий
Поделиться на другие сайты
3 минуты назад, Александр Христич сказал:

Уже пробывал,без результата,ширина меню остается таким же, а на месте поиска пустое место

947597480_2022-09-1514-04-43.thumb.png.755d2faada2e17312a6569f7705ed00f.png

Не расширяется меню,хоть тресни епрст....

Вариант, что написал @Кириллрабочий.

image.thumb.png.253fc1b96ff57493144cfdf9e999c62e.png

Ссылка на комментарий
Поделиться на другие сайты

 Изините,пжлста. Кэш не чистанул... Все получилось 👋

Ссылка на комментарий
Поделиться на другие сайты

Ну что же,все получилось как и требовалось.

Так как планировалось Поиск перенести из области Меню в шапку,то

решение,которое предложил Кирилл

#elSearchWrapper {display: none;}
#elSearch {
    width: 0;
}

не подошло и было реализованно немного по-другому.

В шаблоне navBar

{template="quickSearch" group="global" app="core" params="$preview"}

заменил на

<div id="elSearchWrapper" class='elSearchWrapper'>
  <div id='elSearch' class='elSearch'></div>
</div>

В custom.css добавил одноименные классы (ну так захотелось) к #elSearchWrapper и #elSearch

#elSearch.elSearch{
width:0px;
}
#elSearchWrapper.elSearchWrapper{
display:none;
}

тем самым мы не затронули основные глобальные стили Поиска для вывода в другом месте и Меню у нас на всю ширину .

И теперь все это выглядет так

1104793706_2022-09-1516-02-28.thumb.png.a9a4f84065cc69485dc621ed85e4ba1f.png

Нуууу вот как-то так !

Изменено пользователем Александр Христич
Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
 Поделиться

×
×
  • Создать...

Важная информация

Используя наш сайт вы соглашаетесь с нашей Политикой конфиденциальности