This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Using .navbar-fixed-top

  • Creator
    Topic
  • #8325
    dezw
    Participant

    Hi there,

    I’m trying to implement collapsable, full-width, fixed top navigation like what is featured at the Twitter Bootstrap website.

    This is probably just a matter of moving “themeblvd_header_menu” to “themeblvd_header_above”, then manipulating some CSS (utilizing fixed positioning, etc).

    But I’m wondering if there is a more elegant solution utilizing “.navbar-fixed-top”. I was actually able to insert “.navbar-fixed-top” into #access using Firebug to see if it would work.

    Would it be possible to point the way towards the best way of achieving this effect? Or maybe it really is just utilizing fixed positioning within my stylesheet? Thanks in advance.

    – Desmond

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #8327
    Jason Bobich
    Keymaster

    Hello Desmond,

    I’d think you’d want to setup your own unique function that uses the markup of Bootstrap examples.

    So, you’d unhook the theme’s function from themeblvd_header_menu.

    remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );

    And then looking at the Bootstrap demo, they have the menu before the entire container; so you’d probably want to use themeblvd_before action.

    function my_menu() {
    	?>
    	<div class="navbar navbar-inverse navbar-fixed-top">
    	  <div class="navbar-inner">
    	    <div class="container">
    	      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	      </button>
    	      <a class="brand" href="#">Project name</a>
    	      <div class="nav-collapse collapse">
    	        <?php 
    	        $args = array(
    	        	'theme_location'	=> 'primary',	// Menu location of theme
    	        	'container' 		=> false,		// We're already wrapping it
    	        	'menu_class'		=> 'nav'		// Same class on <ul> as BS
    	        );
    	        wp_nav_menu( $args );
    	        ?>
    	      </div><!--/.nav-collapse -->
    	    </div>
    	  </div>
    	</div>
    	<?php
    }
    add_action( 'themeblvd_before', 'my_menu' );

    Note: Just copying HTML from this — http://twitter.github.io/bootstrap/examples/starter-template.html

    How wp_nav_menu works:

    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    #8328
    dezw
    Participant

    Awesome. Thanks for the help and links — much appreciated!

    #12586
    jasonjulien
    Participant

    Hey dezw, did you ever get this figured out and implemented? I’d love to know what you ended up doing. Thanks in advance!

    #12995
    mizzinc
    Participant

    Jason, does Jumpstarts Bootstrap include the Scrollspy plugin?

    #13005
    Jason Bobich
    Keymaster

    Currently Jump Start has Bootstrap 2.3 with all javascript bundled. So, this should include the Scrollspy. I’ve never personally messed with it, though.

    #13016
    mizzinc
    Participant

    For anyone else that might be interested in using Scrollspy. I retained the current Jumpstart navigation markup and added ‘nav’ to the ‘menu_class’ in wp_nav_menu.

    function custom_header_menu_default() {
    	do_action( 'themeblvd_header_menu_before' );
    	?>
    	<a href="#access" class="btn-navbar">
    		<?php echo apply_filters( 'themeblvd_btn_navbar_text', '<i class="icon-reorder"></i>' ); ?>
    	</a>
    	<nav id="access" role="navigation">
    		<div class="access-inner">
    			<div class="access-content clearfix">
    				<?php wp_nav_menu( apply_filters( 'themeblvd_primary_menu_args', array( 'menu_id' => 'primary-menu', 'menu_class' => 'nav sf-menu','container' => '', 'theme_location' => 'primary', 'fallback_cb' => 'themeblvd_primary_menu_fallback' ) ) ); ?>
    				<?php themeblvd_header_menu_addon(); ?>
    			</div><!-- .access-content (end) -->
    		</div><!-- .access-inner (end) -->
    	</nav><!-- #access (end) -->
    	<?php
    	do_action( 'themeblvd_header_menu_after' );
    }

    Then add the following to your body tag.

    <body <?php body_class(); ?> data-spy="scroll" data-offset="0">

    Finally call scrollspy in your javascript file

    $('body').scrollspy({ target: '#access' });

    Apply a bit of css and you are done. This probably needs its own topic, at the time I thought it was relevant to .navbar-fixed-top and the Bootstrap markup.

    #13017
    mizzinc
    Participant

    Ha! As soon as I hit submit I realised I could just add that ‘nav’ class using add_filter( ‘themeblvd_primary_menu_args’, ‘custom_primary_menu_args’);

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.