Подскажите пожалуйста как сделать второе меню для это стиля https://wordpress.org/themes/colormag/ над шапкой?
Комментарии: 19

igorbond 14 сен 2018, 21:52 Сообщение

Так же если можно вопросы по данной теме, а именно, в ней в таблицах почему то если у меня справа картинка, а слева рекламный блок, так он просто перекрывает собой картинку, в чем проблема понять вообще не могу
  • 0
Изображение

CabinetAdmin 15 сен 2018, 09:23 Сообщение

Теоретически. В functions.php найти:

Код: Выделить всё

	register_nav_menu( 'primary', __( 'Primary Menu', 'colormag' ) );
и поменять на:

Код: Выделить всё

	register_nav_menus( array( 
        'primary' => __( 'Primary Menu', 'colormag' ), 
        'header_menu' => 'Меню над шапкой', 
    ));
дальше в файле header.php после:

Код: Выделить всё

<div id="page" class="hfeed site">
добавляем:

Код: Выделить всё

<?php wp_nav_menu( array( 'theme_location' => 'header_menu', 'menu_class' => 'nav-menu' ) ); ?>
Потом в админке в "Внешний вид – Меню", там должно быть что-то вроде “Отредактируйте меню или создайте меню”, нужно создать новое меню. Далее всё как обычно. Даёте меню название, не ставите галочку в пункте "Основное меню", добавляете пункты, добавляете в меню и сохраняете.
igorbond писал(а): Так же если можно
Тут я ничего не понял, тут надо видеть что там что перекрывает.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 15 сен 2018, 09:40 Сообщение

CabinetAdmin писал(а): Тут я ничего не понял, тут надо видеть что там что перекрывает.
С этим я уже сам разобрался, спасибо. С меню опробую и отпишу
  • 0
Изображение

igorbond 19 сен 2018, 23:28 Сообщение

Попробовал, работает, только не становится таким же стилем как и другое меню
  • 0
Изображение

CabinetAdmin 20 сен 2018, 16:06 Сообщение

По шаблону там ещё блоки есть со своими классами, в котором содержится навигация. На вскидку, так:

Код: Выделить всё

<?php wp_nav_menu( array( 'theme_location' => 'header_menu', 'container_class' => 'menu-primary-container', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) ); ?>
или так:

Код: Выделить всё

<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
	<div class="inner-wrap clearfix">
		<?php wp_nav_menu( array( 'theme_location' => 'header_menu', 'container_class' => 'menu-primary-container', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) ); ?>
	</div>
</nav>
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 20 сен 2018, 20:42 Сообщение

Опробовал второй способ и в моб. версии верхнее меню просто пропало, а второе не разворачивается.
  • 0
Изображение

CabinetAdmin 21 сен 2018, 15:26 Сообщение

Стили то какие должны быть? Такие же как по ссылке или уже под себя перекрашено?
Поставить вариант, который я давал изначально, и перекрасить под себя.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 02 окт 2018, 21:01 Сообщение

CabinetAdmin, Что то с уведомлениями, ждал ответа, а он уже давно тут. Насчет стилей не совсем понял. Мне нужно чтобы было просто второе меню в том же стиле как и первое, вот и все. Но работали корректно оба.
  • 0
Изображение

igorbond 03 окт 2018, 15:45 Сообщение

В общем можете подсказать современное меню, полностью адаптивное для компьютера и мобильного. Сворачивание и разворачивание. В общем все.
  • 0
Изображение

igorbond 03 окт 2018, 16:22 Сообщение

Вот классное меню, но не смог понять как его адаптировать для темы, оно почему то конфликтует. Можно его подправить? https://ruseller.com/lessons/les1502/demo/index.html


Так же прикладываю его исходники
  • 0
Вложения
demo_1502.zip
4.64 КБ 62 скачивания
Изображение

CabinetAdmin 03 окт 2018, 17:00 Сообщение

Специально сейчас закинул тему чтобы посмотреть.

В общем так. Находим:

Код: Выделить всё

<header id="masthead" class="site-header clearfix">
и после вставляем:

Код: Выделить всё

		<nav id="site-navigation-top" class="main-navigation clearfix" role="navigation">
			<div class="inner-wrap clearfix">
				<h4 class="menu-toggle"></h4><?php wp_nav_menu( array( 'theme_location' => 'header_menu', 'container_class' => 'menu-primary-container', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) ); ?>
			</div>
		</nav>
Открываем стилевой файл, находим:

Код: Выделить всё

#site-navigation {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset;
   position: relative;
   background-color: #232323;
   border-top: 4px solid #289dcc;
}
#site-navigation .inner-wrap {
   position: relative;
}
и меняем на:

Код: Выделить всё

#site-navigation, #site-navigation-top {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset;
   position: relative;
   background-color: #232323;
   border-top: 4px solid #289dcc;
}
#site-navigation .inner-wrap, #site-navigation-top .inner-wrap {
   position: relative;
}
находим:

Код: Выделить всё

#site-navigation {
   z-index: 999;
}
меняем на:

Код: Выделить всё

#site-navigation, #site-navigation-top {
   z-index: 999;
}
Открываем navigation.js и в конец добавляем:

Код: Выделить всё

( function() {
	var container, button, menu;

	container = document.getElementById( 'site-navigation-top' );
	if ( ! container ) {
		return;
	}

	button = container.getElementsByTagName( 'h4' )[0];
	if ( 'undefined' === typeof button ) {
		return;
	}

	menu = container.getElementsByTagName( 'ul' )[0];

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += 'nav-menu';
	}

	button.onclick = function() {
		if ( -1 !== container.className.indexOf( 'main-small-navigation' ) ) {
			container.className = container.className.replace( 'main-small-navigation', 'main-navigation' );
		} else {
			container.className = container.className.replace( 'main-navigation', 'main-small-navigation' );
		}
	};
} )();
Плюс правки в functions.php из третьего сообщения.

Настраиваем и пользуемся.
  • 1
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 03 окт 2018, 17:13 Сообщение

Круто, спасибо. Работает как надо. Еще пару вопросов если не против. Как сделать так, чтобы рядом с тремя полосками появилась надпись Меню справа экрана.
  • 0
Изображение

CabinetAdmin 03 окт 2018, 18:49 Сообщение

Во первых добавить саму надпись сюда:

Код: Выделить всё

<h4 class="menu-toggle"></h4>
а потом в .site-header .menu-toggle:before поменять display: block; на:

Код: Выделить всё

	display: inline-block;
	vertical-align: middle;
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 14 окт 2018, 21:22 Сообщение

Спасибо, это работает. А к первомю основному меню эту надпись добавить?
  • 0
Изображение

Похожие темы