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

[Александр Христич 11]

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

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

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

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

 

 

 

[Кирилл 175]

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

[Александр Христич 11]

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

[Александр Христич 11]

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

[Кирилл 175]

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

[Александр Христич 11]

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"} ) и на сайте выглядет так

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

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

[Александр Христич 11]

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

[TemKa_SD 8]

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

#elSearchWrapper{
  display:none;
}

 

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

Edited September 14, 2022 by TemKa_SD

[Александр Христич 11]

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

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

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

Edited September 15, 2022 by Александр Христич

[Кирилл 175]

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

[Александр Христич 11]

13 минут назад, Кирилл сказал:

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

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

[Кирилл 175]

В custom.css:

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

 

[Александр Христич 11]

8 минут назад, Кирилл сказал:

В custom.css:

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

 

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

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

[TemKa_SD 8]

3 минуты назад, Александр Христич сказал:

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

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

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

[Александр Христич 11]

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

[Александр Христич 11]

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

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

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

#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;
}

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

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

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

Edited September 15, 2022 by Александр Христич