0
Я создал тему загрузки для моего сайта Wordpress, но мобильное меню не отображается, когда я делаю окно моего браузера меньше Я уже пробовал все в stackoverflow, но всякий раз, когда я пытаюсь выполнить другой код меню, мое меню становится крошечным и вытаскивается в правую сторону окна моего браузера. Я не знаю, в чем проблема.Меню загрузочного мобильного меню не отображается в wordpress
Вот мой код меню:
<body <?php body_class(); ?>>
<?php if (is_front_page()) { ?>
<nav class="navbar navbar-home navbar-static-top" role="navigation">
<div class="container">
<!-- Mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo home_url(); ?>"><img src="http://localhost:8888/wp-content/uploads/2016/01/[email protected]" height="20" width="157"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links for toggling -->
<?php // Loading WordPress Custom Menu
wp_nav_menu(array(
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',
'container_id' => 'navbar-ex1-collapse',
'menu_class' => 'nav navbar-nav pull-right',
'menu_id' => 'main-menu',
'walker' => new Cwd_wp_bootstrapwp_Walker_Nav_Menu()
));
?>
</nav>
<div class="fullscreen-bg">
<div class="hometext">
<h1 style="color: #ffffff;">VI ÄLSKAR BILDER.</h1>
<h4 style="color: #ffffff;">Vi gör tavlor på en mängd olika vis. Komponera din egen kombination av material och bearbetning eller välj bland våra färdiga lösningar.</h4>
</div>
<span class="read-more-container"><a class="scroll" href="#start">LÄS MER<br><img src="http://localhost:8888/wp-content/uploads/2016/01/arrowdown.png" style="max-width: 50px;"/></a></span>
</div>
<?php } else { ?>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo home_url(); ?>"><img src="http://localhost:8888/wp-content/uploads/2015/10/[email protected]" height="20" width="157"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links for toggling -->
<?php // Loading WordPress Custom Menu
wp_nav_menu(array(
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class' => 'nav navbar-nav pull-right',
'menu_id' => 'main-menu',
'walker' => new Cwd_wp_bootstrapwp_Walker_Nav_Menu()
));
?>
</nav>
У меня есть два разных меню на моем сайте. Тот, который отображается только на первой странице, а другой на каждой другой странице. (Они имеют разные цвета и логотипы)
EDIT: HTML-код, который визуализируется:
<nav class="navbar navbar-home navbar-static-top" role="navigation">
<div class="container">
<!-- Mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="http://localhost:8888"><img src="http://localhost:8888/wp-content/uploads/2016/01/[email protected]" height="20" width="157"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links for toggling -->
<div id="navbar-ex1-collapse" class="collapse navbar-collapse navbar-ex1-collapse"><ul id="main-menu" class="nav navbar-nav pull-right"><li id="menu-item-394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-394"><a href="http://localhost:8888/material/">MATERIAL</a></li>
<li id="menu-item-393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-393"><a href="http://localhost:8888/bearbetning/">BEARBETNING</a></li>
<li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392"><a href="http://localhost:8888/bildtjanster/">BILDTJÄNSTER</a></li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://localhost:8888/kontakt/">KONTAKT</a></li>
</ul></div>
</nav>
Можете ли вы добавить HTML-код для рендеринга для навигатора? Я предполагаю, что есть некоторая ошибка класса или структуры, которую вы пропускаете, что препятствует правильному отображению мобильного навигатора. Я не вижу его в PHP, и я не совсем уверен, что именно делает Cwd_wp_bootstrapwp_Walker_Nav_Menu(), поэтому HTML будет полезен. – tayvano
У вас есть класс 'pull-right' в вашем' menu_class', который определяется в массиве 'wp_nav_menu'. Если вы не хотите, чтобы меню было направо, удалите «pull-right» изнутри. Вы можете использовать CSS Media Queries для управления классом 'pull-right' на разных размерах экрана, если вам это нужно для больших просмотров, но не на небольших представлениях. –
Я добавил HTML, который отображается на мой вопрос! – Christian