Jump to content


Photo
- - - - -

How to Place a Responsive Bootstrap Navbar onto a page


Best Answer Rob , 11 March 2013 - 10:54 PM

Mike,

 

This should be fairly simple.

 

Go to Dashboard > PageLines > Drag & Drop and move the Universal or Full-Width sidebar (whichever is available) below the NavBar; taking it from Available and moving it to Active. Make sure that the vertical order of them has NavBar over the sidebar.

 

Install and activate Widget Logic plugin and read the conditional tags link found in the main page here:  http://wordpress.org...s/widget-logic/  You'll want the Page Conditionals.

 

Go to Dashboard > Appearance > Widgets.  Add a text widget to the sidebar you added and in the Widget Logic field, apply the conditional for the page you want this to appear on.  In the widget text area, add the shortcode for the menu you desire, and if custom styled, don't forget to wrap it in a div with a unique class.  Save the widget.

 

For every page you want a menu on, repeat the process of adding a text widget, using the Widget Logic field, a conditional tag and your menu inside the widget.  You don't need bootstrap plugins, or anything other than I've stated here.

 

You can have unlimited widgets in a sidebar with Widget Logic, and have them appear in specific places only with that wonderful plugin.

 

Hope this helps.

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 miketaylorphoto

miketaylorphoto

    Advanced Member

  • Members

  • 64 posts
  • LocationToronto
  • Framework Version:Developer
  • Country: Country Flag

Posted 11 March 2013 - 08:21 PM

Have tried to put bootstrap components onto a page and they don' work



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 March 2013 - 09:34 PM

Could you provide more details and a link?

 

Thanks.



#3 miketaylorphoto

miketaylorphoto

    Advanced Member

  • Members

  • 64 posts
  • LocationToronto
  • Framework Version:Developer
  • Country: Country Flag

Posted 11 March 2013 - 10:33 PM

Please Login or Register to see this Hidden Content

needs to look like 

Please Login or Register to see this Hidden Content

but with a different secondary menu on the navbar

 

 

Hi robert,

 

I am going to need to put some secondary navs on different pages. I want them to be like the pagelines navbar. Unfortunately the only way to do it on a page by page basis is by using the secondary nav. So I want to put a bootstap responsive navbar on particular pages.

 

Please Login or Register to see this Hidden Content

but i need to  put these plugins Heads up! The responsive navbar requires the 

Please Login or Register to see this Hidden Content

 and 

Please Login or Register to see this Hidden Content

.but im not sure where to put them. I am using base as a child theme. So should I put the 

Please Login or Register to see this Hidden Content

. in the framework of the child theme and the same with the collapse js.

 

If you have another suggestion would be great

 

Ps I have the content bootstrap plugin Apply twitter bootstrap css under the content area only.

Version 0.3.0 | By 

Please Login or Register to see this Hidden Content

 | 

Please Login or Register to see this Hidden Content

 
and 
Grid Shortcodes

Please Login or Register to see this Hidden Content

 | 

Please Login or Register to see this Hidden Content

Adds a collection of shortcodes for easy implementation of the responsive Bootstrap Grid!

Version 1.2 | By 

Please Login or Register to see this Hidden Content

 | 

Please Login or Register to see this Hidden Content

installed



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 March 2013 - 10:54 PM   Best Answer

Mike,

 

This should be fairly simple.

 

Go to Dashboard > PageLines > Drag & Drop and move the Universal or Full-Width sidebar (whichever is available) below the NavBar; taking it from Available and moving it to Active. Make sure that the vertical order of them has NavBar over the sidebar.

 

Install and activate Widget Logic plugin and read the conditional tags link found in the main page here: 

Please Login or Register to see this Hidden Content

  You'll want the Page Conditionals.

 

Go to Dashboard > Appearance > Widgets.  Add a text widget to the sidebar you added and in the Widget Logic field, apply the conditional for the page you want this to appear on.  In the widget text area, add the shortcode for the menu you desire, and if custom styled, don't forget to wrap it in a div with a unique class.  Save the widget.

 

For every page you want a menu on, repeat the process of adding a text widget, using the Widget Logic field, a conditional tag and your menu inside the widget.  You don't need bootstrap plugins, or anything other than I've stated here.

 

You can have unlimited widgets in a sidebar with Widget Logic, and have them appear in specific places only with that wonderful plugin.

 

Hope this helps.



#5 miketaylorphoto

miketaylorphoto

    Advanced Member

  • Members

  • 64 posts
  • LocationToronto
  • Framework Version:Developer
  • Country: Country Flag

Posted 12 March 2013 - 12:49 PM

Not sure you checked the link 

Please Login or Register to see this Hidden Content

 but i have managed to get the navbar on the page and it does collapse . I  think what i really need is to know where I can copy the code for the style of the pagelines navbar.   



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15026 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 12:53 PM

Hi,

 

Not sure what you mean when you say "I  think what i really need is to know where I can copy the code for the style of the pagelines navbar."

Can you explain in greater detail please.



#7 miketaylorphoto

miketaylorphoto

    Advanced Member

  • Members

  • 64 posts
  • LocationToronto
  • Framework Version:Developer
  • Country: Country Flag

Posted 12 March 2013 - 01:40 PM

morning Danny. Ok i realize that I am not explaining this well. On a couple of pages I am going to need to have secondary navigation with different menus . To do this I could be using the secondary drag and drop navigation   Problem is that the secondary nav is a simple nav. I want it to be a navbar. All my problems would be solved if the secondary nav was a navbar. Can I replace the style for the second nav with the style of the navbar and if so what would be the easiest way. Maybe the less file? Cause putting bootsrtap code on the page code on the page is really not workin for me



#8 miketaylorphoto

miketaylorphoto

    Advanced Member

  • Members

  • 64 posts
  • LocationToronto
  • Framework Version:Developer
  • Country: Country Flag

Posted 12 March 2013 - 02:49 PM

This is what I have in this  page 

Please Login or Register to see this Hidden Content

 

 

<!-- NavBar | Section Template -->
<section id="navbar" class="container no_clone section-navbar fix"><div class="content"><div class="content-pad"> <div class="navbar fix navbar-content-width  pl-color-blue plnav_hover">
 <div class="navbar-inner ">
   <div class="navbar-content-pad fix" style="">
    <span class="navbar-title">Menu</span>
     <a href="javascript:void(0)" class="nav-btn nav-btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </a>
 
      <div class="nav-collapse collapse">
      <ul id="menu-rooms" class="font-sub navline pldrop pull-left"><li id="menu-item-326" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-298 current_page_item menu-item-326"><a href="

Please Login or Register to see this Hidden Content

">Gold King Suites</a></li>
<li id="menu-item-325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-325"><a href="

Please Login or Register to see this Hidden Content

">Master Suite</a></li>
<li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"><a href="

Please Login or Register to see this Hidden Content

">Studio King</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="

Please Login or Register to see this Hidden Content

">Deluxe Double</a></li>
<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322"><a href="

Please Login or Register to see this Hidden Content

">Poolside King</a></li>
<li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321"><a href="

Please Login or Register to see this Hidden Content

">California King</a></li>
<li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="

Please Login or Register to see this Hidden Content

">Silver King</a></li>
</ul> </div>
<div class="clear"></div>
</div>
</div>
</div>
</div></div></section> </div>
</header>
<div id="page-main" class="container-group">
<div id="dynamic-content" class="outline">
 
 
would that not produce the exact navbar I have on rooms and rates page? Then I could just edit the links to be whatever I want?


#9 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 March 2013 - 10:10 PM

Hi Mike, I thought the plugin you installed resolved the navbar issue?



#10 miketaylorphoto

miketaylorphoto

    Advanced Member

  • Members

  • 64 posts
  • LocationToronto
  • Framework Version:Developer
  • Country: Country Flag

Posted 12 March 2013 - 10:23 PM

no because it was too hard to style.

once I fugured out what rob told me to do it worked perfectly. now i have to install the widget logic

 

Thanks rob

 

Of course the server the site is on is down so I tied it on my site worked great



#11 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 March 2013 - 02:54 AM

Excellent, I'll let Rob know that worked :-)