Bootstrap nav menu on bc website

Hi everyone,
I have this bootsrap nav menu on a bc template and the nav menu button(hamburger btn) shows on the desktop view, plus i would like to now how to make the menu display on the mobile as vertical and horizontal on the desktop view.
its at http://grapejuice.businesscatalyst.com/index.html

Hello Alex,
If you are looking for creating a Bootstrap 3 Navbar and integrate it with Business Catalyst Menu manager i have created a Jquery plugin that will handle this for you. You don't need to mess with css & javascript in order to make it work and your clients dont have to add any dropdown class through the menu manager. The plugin handles all that for you.
Download the plugin here http://www.it-amigo.se/LiteratureRetrieve.aspx?ID=131498.
Then add the a ID to the <nav> tag and afterwards the following script code.
<script type="text/javascript">
$('#nav_id').bootstrapNav({
    // Dropdown Choice: Toggle(Bootstrap Default) = true, Hover Dropdown = false.
    dropdownToggle: true,
    // At what point should navbar go back to Toggle for Mobile Devices.
    breakpoint: 1199
</script>
And Whola! Bootstra 3 Navbar working without issues.
You can find a video tutorial here..
Good luck!
Ivan Mauricio

Similar Messages

Bootstrap nav menu in BC(3rd level dropdowns)

Hi everyone,
I am making a module V2 bootstrap nav menu in BC but i cant get the 3rd level ITEM_1_1 and Items Item2_1_ and item ItEM2_1_1 to open,
Here's the code of the file children.html for this.
<li class="dropdown"{tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}>
<a class="dropdown-toggle" data-toggle="dropdown" href="{tag_menuitemurl}">{tag_menuitemlabel}
</a>
<ul class="dropdown-menu">
{tag_menugroup}
</ul>
</li>
the code for the group.html:
<ul class=" nav">{tag_menuchilditem}</ul>
and the code for the container.html:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <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>
    <div class="nav-collapse collapse">
      <div id="1529273">{tag_menugroup}</div>
    </div>
</div>
</div>
How can this be done in BC?
The link fot the page:
Home Page

View the source code of this menu I'm working on
http://www.ossiningdesignguild.com/indexV3.html
The CSS can be seen here:
http://www.ossiningdesignguild.com/TJnav.css
The deepest dropdowns are under "Jewelry/Stainless Steel/Mens" path.

Bootstarp 2 nav menu in bc(3rd level drop downs)

Hi everyone,
I am making a module V2 bootstrap nav menu in BC but i cant get the 3rd level ITEM_1_1 and Items Item2_1_ and item ItEM2_1_1 to open,
Here's the code of the file children.html for this.
<li class="dropdown"{tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}>
<a class="dropdown-toggle" data-toggle="dropdown" href="{tag_menuitemurl}">{tag_menuitemlabel}
</a>
<ul class="dropdown-menu">
{tag_menugroup}
</ul>
</li>
the code for the group.html:
<ul class=" nav">{tag_menuchilditem}</ul>
and the code for the container.html:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <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>
    <div class="nav-collapse collapse">
      <div id="1529273">{tag_menugroup}</div>
    </div>
</div>
</div>
How can this be done?
The link:
Home Page

View the source code of this menu I'm working on
http://www.ossiningdesignguild.com/indexV3.html
The CSS can be seen here:
http://www.ossiningdesignguild.com/TJnav.css
The deepest dropdowns are under "Jewelry/Stainless Steel/Mens" path.

I have just created a website in Muse. My Problem: The horisontal nav-menu keeps scrolling down as you scrool down on a page (in Prewiev mode). Even though it is above the headerline. What have I possibly done wrong?

I have just created a website in Muse. My problem: The horisontal nav-menu keeps scrolling down as you scrool down on a page (in Prewiev mode). Even though it is above the headerline. What have I possibly done wrong?

Please check if Menu is pinned or not, if not then pin the menu on page and then it will not scroll with page.
Thanks,
Sanjit

Bootstrao nav menu on business catalyst web site(dwt)

Hi everyone,
I am trying to make a nav menu using bootstrap on a BC website template in dreamweaver but the nav menu doesnt work, the nav menu button doesnt do nothing wen we click it and it shows on the desktop view too.(all its still blank and with no css classes)
here is the nav menu code:
<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="index.html"><img src="/images/grapelogo.png" alt="grape juice logo"></a>
              <div class="nav-collapse collapse">
                <ul class="nav menu_desktop">
                   <li><a href="../index.html">HOME</a></li>
              <li><a href="../index.html">ABOUT</a></li>
              <li><a href="../wines.html">WINES</a></li>
              <li><a href="../champagne.html">CHAMPAGNE</a></li>
              <li><a href="../blog.html">BLOG</a></li>
              <li><a href="../contactus.html">CONTACT US</a></li>
                </ul>
              </div>
            </div>
          </div>
    </div>
its at http://grapejuice.businesscatalyst.com/index.html
can anyone give me a hand with this?

Try by placing the following line immediately after <title>Grapejuice</title>
<script type="text/javascript" src="/ScriptLibrary/jquery-latest.pack.js"></script>

Beginner Question: UL Nav Menu and Text Question

Ok, I appreciate the input in advance. Although I am using a Dreamweaver book and online tools like Lynda.com... there are some questions I can't find the answer too or just don't know how to articulate my issue correctly in a search browser to find the right answer...
So, my question:
I have used Spry menu's which are great, but I have taken the time to learn how to create a Pull Down Nav Menu from a Unordered List and CSS.
That UL is driven by text in the list...so what if you want to create an unordered list type Nav pulldown, but want to only use background graphics for the nav menu (i.e. text is already imbedded in the graphic from Photoshop or the graphic has no text and is just a graphic). Whenever I completely delete the text out of a List Item, that list item dissapears, which makes complete sense but begs the question of how do I create a Nav Menu with only graphics that will pull down into multiple levels?
Is what I am asking not a real standard practice and I shouldn't be doing it that way?
If it were a one level menu, I know I could just use floated DIV tags, but since I have pull downs I can't see how that would work in a multiple nested pull down Nav Menu.
Again, sorry for the noob question.. and I appreciate your responses in advance.

Thanks again Murray.. and yes I am serious. I am coding two sites right now for my personal businesses. I have a decent handle on Dreamweaver (but not straight coding which I am sure will come over time through trial and error...) and I now taking courses via Lynda and reading books on PHP.
After seeing your response above, I fell stupid as that is just a failure to learn HTML which is a double-edged sword of DW.
Things are not too bad so far, but I am trying to balance the need for getting the site up in a reasonable amount of time AND learning all the technology behind the site.
Since my site(s) will be actively managed, and I consider myself smart and technically savvy, I just couldn't justify paying someone to manage my sites that would need to be changed almost daily... would probably bankrupt me also.
I know some local sites for medium size businesses where they paid brand name web design companies $40-50k to design and build sites that really aren't that great..and are continuing to pay as they are active sites and they wanted someone to manage them. Other smaller companies are paying between $600 and $1,000 per STATIC page and they provided the artwork upfront and got some pretty simple web development back.
And in this economy, knowing how to design, build, and maintain a website probably isn't the worst skill to have in the event I ever find myself out of middle management CPG work
Some of my challenges I am trying to learn about right now are:
PHP & SQL for contact forms, login for restricted access, consumer feedback, etc.
RSS specific news feeds into the site
SEO
Problem is I seem to have more business ideas than time... I have worked in mid to upper mgmt for large CPG companies most of my life, and recently moved my family to Northwest Arkansas for my career. There is low-hanging fruit everywhere for internet businesses that are tied knowledge specific to the local "retailer" here..In fact, some of them I can't believe haven't been taken advantage of yet (which is why I feel time stressed in case someone else beats me too it).
Thanks again for all your help.
Tim

My nav menu is not working properly in IE8

My nav menu (all css) is not properly working in IE8 (no surprise). The submenu (under contact) seems to disappear when you attempt to hover & try to select on it. Not sure if it's a z-index thing or not. The menu works just fine in firefox, safari, chrome, and opera (of course). All code for the site has been validated and revalidated. I work in Dreamweaver CS4.
No matter what I do, IE always seems to give me issues.
The nav code is below. Here is the link: http://www.americaneaglesteel.com/
Thanks, in advance, for the help.
BRD
#navigation{
width:100%;
height:30px;
background-image: url(images/aestabgroup.png);
background-repeat: no-repeat;
#navigation ul
          margin:0px;
          padding:0px;
          font-family:Arial, Helvetica, sans-serif;
#navigation ul li
          display:inline;
          height:30px;
          float:left;
          list-style:none;
          margin-left:0px;
          position:relative;
          width: 132px;
          padding-top: 7px;
          text-align:center;
          z-index: 1;
#navigation li a
          color:#fff;
          text-decoration:none;
          letter-spacing: 1px;
#navigation li a:hover
{text-decoration:none;
color:#ccc; }
#navigation li ul
          margin:0px;
          padding:0px;
          display:none;
          position:absolute;
          left:12px;
          top:32px;
          width: 133px;
          font-size: 90%;
          background-color: #a41414;
          text-align: center;
          line-height: 160%;
          z-index: 2;
#navigation li:hover ul
display:block;
width:133px
#navigation li li
          list-style:none;
          display:block;
          border-color: #FFF;
          border-style: solid;
          border-width: 1px;
#navigation li li a
          color:#fff;
          text-decoration:none;
#navigation li li a:hover
text-decoration:none;
color:#ccc;

I see the menu when the browser window is wider than about 1180px.<br />
If the window is smaller than I get the menu button.<br />
In Google Chrome this works the same.
A good place to ask advice about web development is at the mozillaZine "Web Development/Standards Evangelism" forum.
*http://forums.mozillazine.org/viewforum.php?f=25
The helpers at that forum are more knowledgeable about web development issues.<br>
You need to register at the mozillaZine forum site in order to post at that forum.

My Bootstrap nav conundrum: Does anyone who has used a bootstrap nav in BC had this issue...

My Bootstrap nav conundrum: Does anyone who has used a bootstrap nav in BC had this issue or know the fix: If you look at any page on http://www.aerotype.com, the first two clicks on almost any part of the page (like the rotator image left or right arrow) cause the page to jump, and you open the inspector on the top nav area and look at the div with the class="navbar-collapse collapse navbar-right navbar-ex1-collapse" you'll see that an additional class, .in, is added and .collapse is removed on the first click, and a style="height: auto;" is added, then on the second click it's changed to style="height: 0;"... I can't figure our what is causing 'in' to be added to the class (or .collapse removed), what it's for, or how to change it, if that is the issue... the his doesn't happen when the class: navbar-collapse is removed, so I think is has something to do with that but of course the collapse doesn't function without it. If anyone can enlighten me on what is going on I would Greatly appreciate it.

You have this click function on the top'ish part of your site.js that is causing this issue!
// collapse navbar in phone mode on click $(document).on('click',function(){ $('.navbar-collapse').collapse('hide'); }) // end collapse navbar in phone mode on click
Your are better off just deleting it (the click function) as it is not doing what the code comment says it does.

Need Help making a navigation menu for a website

Alright so I've been having some problems getting this to work correctly. I am making a navigation menu for a website and I'm trying to get when I hover over the main header a drop down appears animated of course below it. I also want when you highlight a specific text line for it to highlight blue along with a rectangle behind it to change to a lighter shade of red.
Some of the problems I have been running into is play and stop commands on mouseover and them not stopping when they should and getting the text to change color.
Thanks for the help.
Here are some screen grabs of what I am doing
http://imgur.com/W2bZuF3
http://imgur.com/W2bZuF3
http://imgur.com/2GI3y71

Your page's code is still a bit of a wreck. Do you ever look at it?
<html>
<style type="text/css">#p7MBM_1 {
width: 951px;
You need a doctype first - I recommend HTML4.01 Transitional. Open this (and other pages) in DW and use FILE | Convert > HTML 4.01 Transitional, then save. But wait until you do the other changes recommended below before doing this.
Add a <head> tag below the <html> tag.
Add a <title> tag below the <head> tag.
Add this below the <title> tag - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Add </head> below this -
<style type="text/css">

</style>
You may want to change that font-family style to "Goudy Old Style, Geneva, Times, 'Times New Roman', serif", since Goudy is not web safe.
Move <body> below that </head> you just added.
That will clean your code up a bit. Let's look at the page again when you have done these.

Re-using a function with minor changes to load sub Nav menu

Hi.
I have a function that loads xml and uses its to create a
main navigation menu. When an object is selected the movie detects
which button has been selected and traces the label for that
button. I need to take this a step further and have a
sub-navigation menu load when the "Home2" button is selected. As
you can see from the comments in the code with 2 minor changes to
the createBoxes function, the sub-nav menu can be loaded instead of
the main nav menu. My problem is this, I need to main nav menu is
be present at all times, I only need the sub nav to load when the
Home 2 button is pressed and I somehow need to reuse the
createBoxes function with the changes stated in the the comments in
order to load the sub nav menu when required. I want to reuse this
function (if possible) instead of duplicating the code in a new
function.
If anyone can show me how this is done I would be very
greatful.
Thanks
Barry.

basically the submenu will look exactly the same as the main
menu, only it will be positioned to the right of it when the home2
button is pressed. I then need it to unload when any other button
is pressed. By changing the following lines in the current
createBoxes function the submenu loads as I would like. I am just
wondering if it is possible to pass in a couple of vars to change
the lines of code as detailed below, depending on whether the home2
button or one of the other mainn nav buttons is pressed.
The code that when changed loads the submenu:
In function createBoxes change var il:XMLList =
xml.navigation.main_navigation; to var il:XMLList =
xml.navigation.main_navigation.sub_navigation; . This loads the sub
nav instead of the main nav but in the same position as the main
nav.
by also changing box.x = 100; to box.x = 260; in the function
createBoxes the sub nav menu loads in the position I would like it
to be.
Now I am wondering if changing the code to something like the
following (see attached code) could this work?
Barry.

Can I change the nav menu text color?

Can I change the nav menu text color? ( it's too dark for the dark background I like.)

I have this exact same question and you have no reply and I'm wondering what the answer is.

Firefox displaying the nav menu strangely

Hi
I've built the following site and I'm having an issue with older versions of Firefox displaying the nav menu strangely.
http://www.mhn-ltd.com/
Basically the issue is, that when hovering over menu page links, they sporadically disappear and reappear. They div floated right in the header (containing "tel: 01246 xxxxxx Call now to book a visit") is also coming and going. If I delete that floated div, the nav menu works fine, but I ideally want to keep it in. What's also strange, is the problem is not happening on the gallery page, I've copied the code exactly from there to solve the issue but its still happening.
The issue is not happening in the new Firefox, just older versions. I'm on Mac OSX 10.5.8, so cannot upgrade the new version of Firefox, Im using 16.0.2. The problem doesn't exist in any other browser.
Thanks in advance

Hi there
Thanks for your replies, I'm using Firefox 16.0.2
After further investigation, I have found that it is the <select> option within the form in the right hand side div causing the issue.
In this [http://greglumleydesign.co.uk/index.html link,] I have left the <select> option in the form and the issue of the three a links (testimonials, helpful links and get in touch) disappearing in the nav menu when you hover over them is there.
In this [http://greglumleydesign.co.uk/test.html link] I have removed the <select> option within the form and the problem is fixed.
Is there any reason this would be happening?
Thanks

Nav/Menu bar hidden behind images

I placed my nav/menu widget in my master page. I have several layers in each page that I would like to arranged behind the nev/menu bar so I can still utilize it. Muse doesn't seem to let me push the images back behind the nav bar. Currently my photos are covering the nav bar so it can't be utilized. Help! Thank you.

With the release of Muse 4.0 today, Master page elements can now layer in front of content on those pages to which the Master has been applied. To re-order Master page content select elements on the Master page, right-click and select "Move to Master Foreground" or "Move to Master Background" from the popup menu. Alternatively select elements on the Master page, then select Object > Move to Background or Foreground in the Muse application menu. All elements in the Master page set to "Move to Master Foreground" will appear on top of all elements in the Page.
Please refer to Muse release notes for more information on this.
http://helpx.adobe.com/content/help/en/muse/release-note/adobe-muse-re lease-notes.html
Thanks,
Vinayak

Propogating Nav Menu Changes

Does anyone know how to make changes to Nav Menus propogate
throughout my entire site? If I want to add a section to my site,
how can I make the change once to the menu and trickle it out to
the 40 .html pages on my site. Otherwise I have to copy and paste
the new Nav Menu to every .html page. This is easy in MS Publisher,
Drupal and other programs. Why is this not obvious in DW? What am I
missing here? Thanks.

Server Side Includes (SSI) or a DW template would accomplish
your purpose.
"mtbresource" <[email protected]> wrote in
message
news:gd5ogj$79f$[email protected]..
> Does anyone know how to make changes to Nav Menus
propogate throughout my
> entire site? If I want to add a section to my site, how
can I make the
> change
> once to the menu and trickle it out to the 40 .html
pages on my site.
> Otherwise I have to copy and paste the new Nav Menu to
every .html page.
> This
> is easy in MS Publisher, Drupal and other programs. Why
is this not
> obvious in
> DW? What am I missing here? Thanks.
>

DW Nav Menu

Hi:
I am not understanding the explanation of why my Nav Menu is
not validating, either in DW or W3C. Please advise...
http://www.curlytopdesign.com/testwebs/john_martin/index.html
I can also build this in CSS, but I was hoping for some
enlightenment.
Thx, Ned

It's not on the anchor. It's on the image.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Osgood" <[email protected]> wrote in
message
news:gqt9br$p29$[email protected]..
> Nedward wrote:
>> Hi:
>>
>> I am not understanding the explanation of why my Nav
Menu is not
>> validating, either in DW or W3C. Please advise...
>>
>>
http://www.curlytopdesign.com/testwebs/john_martin/index.html
>>
>> I can also build this in CSS, but I was hoping for
some enlightenment.
>>
>> Thx, Ned
>>
>
> You cant have onload="" on the anchor attribute (see
near the end below),
> remove it and the validation error should go away.
>
>
> <a href="index.html" target="_top"
>
onclick="MM_nbGroup('down','group1','home','images/home_down.gif',1)"
>
onmouseover="MM_nbGroup('over','home','images/home_over.gif','',1)"
> onmouseout="MM_nbGroup('out')"><img
src="images/home_off.gif" alt="link to
> Home page" name="home" border="0" id="home"
onload=""></a>
>
>
> Like this:
>
>
> <a href="index.html" target="_top"
>
onclick="MM_nbGroup('down','group1','home','images/home_down.gif',1)"
>
onmouseover="MM_nbGroup('over','home','images/home_over.gif','',1)"
> onmouseout="MM_nbGroup('out')"><img
src="images/home_off.gif" alt="link to
> Home page" name="home" border="0"
id="home"></a>

Bootstrap nav menu on bc website

Similar Messages

Maybe you are looking for