i have created bootstrap theme wordpress website mobile menu doesn't show when make browser window smaller i've tried on stackoverflow far, whenever try out menu code, menu gets tiny , pulled right side of browser window. don't know problem is.
here's menu code:
<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/proformat_logotypewhite@2x.png" 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 nav links 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/proformat_logotype@2x.png" 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 nav links 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> i have 2 different menus on website. 1 showing on front page, , 1 on every other page. (they have different colors , logotypes)
edit: html code being rendered:
<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/proformat_logotypewhite@2x.png" 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 nav links 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>
you need add navbar-default (or navbar-inverse)
<nav class="navbar navbar-default navbar-home navbar-static-top" role="navigation"> you can use custom navbar-home class override styles/colors. or, if compiling boostrap .less yourself, can play colors navigation/hover states in variables.less.
i apply navbar-default homepage navigation , navbar-inverse internal page navigation , play colors & styling there, removing need additional classes @ all.
http://codepen.io/anon/pen/jwzxvz
extras:
you missing closing container div tag
you can use .navbar-right on .navbar-collapse div.
you need make sure loading jquery , bootstrap's js toggle functionality.
Comments
Post a Comment