I have created a bootstrap theme for my wordpress website but the mobile menu doesn't show up when I make my browser window smaller
I've tried everything on stackoverflow so far, but whenever I try out another menu code, my menu gets tiny and pulled to the right side of my browser window. I don't know what the problem is.
Here's my 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 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/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 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>
I have two different menus on my website. One that is showing only on the front page, and another one on every other page. (they have different colors and logotypes)
EDIT:
The HTML code that is 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 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">MATERIAL</li>
<li id="menu-item-393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-393">BEARBETNING</li>
<li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392">BILDTJÄNSTER</li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">KONTAKT</li>
</ul></div>
</nav>
You need to add navbar-default (or navbar-inverse) to
<nav class="navbar navbar-default navbar-home navbar-static-top" role="navigation">
You can then use your custom navbar-home class to override the styles/colors. Or, if you are compiling the boostrap .less yourself, you can play with the colors for all the navigation/hover states in variables.less.
I would personally apply navbar-default to your homepage navigation and navbar-inverse to your internal page navigation and play with colors & styling from there, removing the need for the additional classes at all.
http://codepen.io/anon/pen/jWZXvZ
Extras:
You are also missing a closing container div tag
You can use .navbar-right on the .navbar-collapse div.
You will need to make sure you are loading jquery and then bootstrap's JS for the toggle functionality.
Related
Here is the problem. I'm creating a theme in WordPress and I have trouble with dynamic navigation menu on Mobile devices.
Here is the code which I use:
<nav id="primary-menu" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#page">
<img class="logo-dark" src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo/logo-dark.png" alt="appy Logo">
<img class="logo-light" src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo/logo-light.png" alt="appy Logo">
</a>
</div>
<?php
wp_nav_menu (array (
'theme_location' => 'menu-1',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse pull-right',
'menu_id' => 'navbar-collapse-1',
'menu_class' => 'nav navbar-nav nav-pos-right navbar-left nav-split',
));
?>
<!--<div class="collapse navbar-collapse pull-right" id="navbar-collapse-1">
<ul class="nav navbar-nav nav-pos-right navbar-left nav-split">
<li class="active"><a data-scroll="scrollTo" href="#slider">home</a>
</li>
<li><a data-scroll="scrollTo" href="#feature2">feature</a>
</li>
<li><a data-scroll="scrollTo" href="#banner">author</a>
</li>
<li><a data-scroll="scrollTo" href="#reviews">reviews</a>
</li>
<li><a data-scroll="scrollTo" href="#pricing">pricing</a>
</li>
<li><a data-scroll="scrollTo" href="#cta">download</a>
</li>
</ul>
</div> -->
<!--/.nav-collapse -->
</div>
</nav>
Menu in functions.php file:
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'bookfolio' )
) );
add_action( 'after_setup_theme', 'bookfolio_setup' );
I put the HTML code in the comment so you can see how it looks like.
The desktop version works perfectly, but the problem is on Mobile devices.
You should use custom walker to display menu in bootstrap CSS
https://github.com/dupkey/bs4navwalker
At the moment i am converting my HTML to Wordpress. No matter what i try i can't seem to get my menu look the same in
Wordpress as it does in HTML. The CSS is correct (did allot of troubleshooting to root that out). This is the HTML:
<div class="navbar-wrapper">
<div class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="assets/img/Logo%20BY.png" alt="Logo" height="75" width="75"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Onze diensten</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
And this is the Wordpress way i am trying to implement:
<div class="navbar-wrapper">
<div class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo%20BY.png" alt="Logo" height="75" width="75">
</a>
</div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-right'
));
?>
</div>
</div>
</div>
Thanks in advance for the help!
I suspect you are missing the container div. Right click and inspect on the badly formatted menu and see if the (container) div is there
<div class="navbar-collapse collapse">
You have
'container' => 'nav'
should be
'container' => 'div'
My question is simply put, how do I add the ability to dynamically add sub menu items from child pages, in the form of a dropdown, in a Wordpress site using bootstrap navbar. I have it setup to add menu items as a regular page is added using the following code:
<nav class="navbar nav-main navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="/wp-content/themes/brtheme/images/blue-realty-logo.png"></img></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right nav-main">
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
'items_wrap' => '%3$s',
'depth' => '2'
));
?>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Every time a page is added through the Wordpress dashboard it gets added to my navbar but how do I implement the use of child pages?
I need a little help with my code. I'm using bootstrap and i have 3 links for now and i want them to be active as i click on them. I tried many ways to do that but i failed.
Here is my code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">POSLOVNA STATISTIKA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Poslovni korisnici <span class="sr-only">(current)</span></li>
<li>Korisnici</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ul class="nav navbar-nav">
<li <?php if(isset($_GET['poslovni_korisnici'])){ echo 'class="active"'; } ?>>Poslovni korisnici <span class="sr-only">(current)</span></li>
<li <?php if(isset($_GET['korisnici'])){ echo 'class="active"'; } ?>Korisnici</li>
</ul>
I am creating my 2nd custom WordPress theme and having problems.
I used the same method in my 1st theme and it worked fine, but not this time of course.
I registered my menu in functions.php like this:
<?php
//Register main menu
function register_theme_menu() {
register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'register_theme_menu' );
?>
And called the menu in my header.php like this:
<!-- Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-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>
<nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<?php wp_nav_menu( array(
'theme_location' => 'main-menu',
'menu_class' => 'nav navbar-nav'
) ); ?>
</ul>
</nav>
<!-- End menu -->
I set mu menu in WP backend but its not responding, it just lists all my pages on the front end. Where am I going wrong?
Thanks
This is because you have passed primary in as the first parameter of the register_nav_menu() function and you are passing main-menu in the template.
<nav class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-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>
<nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'nav navbar-nav'
) ); ?>
</ul>
</nav>
Pro Bono Advice
You are best using https://github.com/twittem/wp-bootstrap-navwalker for Wordpress / Bootstrap themes because the menu is difficult to implement. There is loads of tutorials online in how to implement it. This is because if you have any levels deeper than 2 the menu will break :-( bad times.