Jump to content
miketaylorphoto

How to Place a Responsive Bootstrap Navbar onto a page

Recommended Posts

miketaylorphoto

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

Share this post


Link to post
Share on other sites
Rob

Could you provide more details and a link?

 

Thanks.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
miketaylorphoto

http://canyonclubhotel.com/wordpress1/amenities/ needs to look like http://canyonclubhotel.com/wordpress1/gold-king-suites/ 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.

 

http://twitter.github.com/bootstrap/components.html#navbar but i need to  put these plugins Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.but im not sure where to put them. I am using base as a child theme. So should I put the responsive Bootstrap CSS file. 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 Takayuki Miyauchi | Visit plugin site
 
and 
Grid Shortcodes

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

Version 1.2 | By Evan Mattson | Visit plugin site

installed

Share this post


Link to post
Share on other sites
Rob

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/extend/plugins/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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
miketaylorphoto

Not sure you checked the link http://canyonclubhotel.com/wordpress1/amenities/ 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.   

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
miketaylorphoto

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

Share this post


Link to post
Share on other sites
miketaylorphoto

This is what I have in this  page http://canyonclubhotel.com/wordpress1/amenities/

 

 

<!-- 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="http://canyonclubhotel.com/wordpress1/gold-king-suites/">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="http://canyonclubhotel.com/wordpress1/master-suite/">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="http://canyonclubhotel.com/wordpress1/studio-king/">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="http://canyonclubhotel.com/wordpress1/deluxe-double/">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="http://canyonclubhotel.com/wordpress1/poolside-king/">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="http://canyonclubhotel.com/wordpress1/california-king/">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="http://canyonclubhotel.com/wordpress1/silver-king/">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?

Share this post


Link to post
Share on other sites
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
miketaylorphoto

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

Share this post


Link to post
Share on other sites
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×