BB template Beginners YUK?? RESPONSIVE?

[jefferis]

Hi folks, I am trying to follow the tutorials and have gotten so far... problem is that what is supposed to be a responsive side menu is really not. The second level is not hidden until click, for example and it disappears entirely on a small screen. The Top Menu also disappears on all screens... I have it enabled... Wondering if this is simply a function of bad initial design or do all responsive templates function this badly?

Here is a sample of the side menu: http://southernclassicjewelry.pairsite.com/store/cameos.html

[Jim]

Do you have the option " Insert an html comment before each include file " on the Utilities > Publish screen checked? If you do un-check it and republish the site. The comments added when that option is checked can sometimes break some css and javascript.

[jefferis]

thanks. I removed the html comments. Still missing top level menu and side menu is not a collapsing tree menu... I.e., submenus are hidden until a top level is clicked.
Also, the left menu drops below all page content in mobile, which is useless...

Any other template base that works well for all these? I can modify the css for them more easily I think than I can fix this one!

[ShopSite Lauren]

You can try the following steps to replace the bb.js file. Looks like the top navigation menus not flying out is specific to Chrome browsers. The following should fix the issue.

1. Go to Merchandising > Custom Templates > Includes > New Publish, and create a publish file called bb.js.

2. Edit your newly created bb.js file by including the following code, then save changes and republish your store.

Code: Select all

function savings(r,s,f) {var percent = 100-((s/r)*100).toFixed(0); var saved = (s-r).toFixed(2); if (f == "percentonly") {document.write("(" + percent + "% off) ");}else {document.write("[-- STORE.CurrencySymbol --]" + saved + " (" + percent + "%) ");}}
Array.prototype.max = function() {var max = this[0];var len = this.length;for (var i = 1; i < len; i++) if (this[i] > max) max = this[i];return max;}
Array.prototype.min = function() {var min = this[0];var len = this.length;for (var i = 1; i < len; i++) if (this[i] < min) min = this[i];return min;}
function genToggle(elone,eltwo) {var elorig = document.getElementById(elone); var elnew = document.getElementById(eltwo); if (elorig != null) {elorig.setAttribute('id',eltwo);} else {elnew.setAttribute('id',elone);};}
######################################## Subproducts and checking form submits for products
function selectCheck(f) {var popts = f.getElementsByTagName("select"); for (var i=0;i<popts.length;i++) {var lasttwo = popts[i].value.substr(-2); if (lasttwo == ";n") {popts[i].setAttribute("class","notselected"); alert("[-- STORE.OopsOptions --]"); return false;};}}
function checkSubproducts(f) {var itemnum = ss_jQuery('input[name=itemnum]:checked',f);if(itemnum.length >= 1)return true;else{alert("[-- STORE.OopsOptions --]");return false;}}

[-- IF PageMenu --]
function verticalNav() {
    $("div.suckertreemenu ul#ShopSite").parent().attr("id","verticalNav");
    $(".bb-navfolder").children("a").on("click",function(event) {
        $(this).parent().children("ul").toggle();
         $(this).parent().children("ul").children("li").children("a").on("click",function(){
            if ($(this).parent("li").children("ul").length > 0) {
                 $(this).parent().children("ul").toggle();
                 event.preventDefault();
            }
         });
        event.preventDefault();
        });
    $("#bb-fade").click(function() {openVertical();});
}
function horizontalNavTouch() {
    menuReset();
    if ($("ul#ShopSite").is(":hidden")) {$("div.suckertreemenu ul#ShopSite").attr("style","display:''");};
    $("div.suckertreemenu ul#ShopSite").parent().attr("id","horizontalNavTouch");
    $("ul#ShopSite > li.bb-navfolder").children("a").focus(function() {
        $(".bb-navfolder").children("ul").hide();
        $(this).parent().children("ul").toggle();
        $(this).click(function(){return false; $(this).preventDefault();});
    });
}
function regularNav() {
    menuReset();
    if ($("ul#ShopSite").is(":hidden")) {$("div.suckertreemenu ul#ShopSite").attr("style","display:''");};
    $("div.suckertreemenu ul#ShopSite").parent().attr("id","horizontalNav");
}

function menuReset() {$("div.suckertreemenu ul#ShopSite li ul").each(function() {$(this).css("display","");});}
function openVertical() {$("div#verticalNav ul#ShopSite").toggle();}
[-- END_IF --]

function sizePop() {$("#bb-sizepopup").toggle(); return false;}
function debouncer( func , timeout ) {var timeoutID , timeout = timeout || 100; return function () {var scope = this , args = arguments; clearTimeout( timeoutID ); timeoutID = setTimeout( function () {func.apply( scope , Array.prototype.slice.call( args ) );} , timeout );}}

[-- IF MiniCart --]function DisplayMiniCart(format) {document.write("<div id=\"bb-miniflyout\">");var cookies=document.cookie;var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");var cartvalues = "";var linecount = 0;var start1;var end1;var tmp;if (start == -1) {document.write("<a id=\"bb-minicart\" href=\"[-- SHOPPING_CART_URL --]\" title=\"[-- STORE.ViewCartText --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\"><span id=\"bb-miniview\">[-- STORE.ViewCartText --]<\/a>");}else {document.write("<a id=\"bb-minicart\" href=\"[-- SHOPPING_CART_URL --]\" title=\"[-- STORE.ViewCartText --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\"><span id=\"bb-minicount\">");start = cookies.indexOf("=", start) +1;var end = cookies.indexOf(";", start);if (end == -1) {end = cookies.length;};cartvalues = unescape(cookies.substring(start,end));start = 0;while ((start = cartvalues.indexOf("|", start)) != -1){start++;end = cartvalues.indexOf("|", start);if (end != -1){linecount++;if (linecount == 2) {tmp = cartvalues.substring(start,end);colon = tmp.indexOf(":", 0);document.write(tmp.substring(colon+1,end - start));if ((tmp.substring(colon+1,end - start)) == 1){document.write("<\/span><span id=\"bb-miniview\">[-- STORE.Item --]<\/span>");}else {document.write("<\/span><span id=\"bb-miniview\">[-- STORE.Items --]<\/span>");};};if ((format == "Subtotal") && (linecount == 3)){document.write("<span id=\"bb-minitotal\">");tmp = cartvalues.substring(start,end);colon = tmp.indexOf(":", 0);document.write(tmp.substring(colon+1,end - start));document.write("<\/span><\/a>");};if ((format == "Detail") && (linecount == 3)) {start1 = start;end1 = end;document.write("<\/span><\/a><div class=\"bb-mini\"><div><table><tr><td class=\"bb-minittl bb-miniqty\">[-- STORE.Qty --]<\/td>");document.write("<td class=\"bb-minittl bb-miniprd\">[-- STORE.Product --]<\/td>");document.write("<td class=\"bb-minittl bb-miniprc\">[-- STORE.Price --]</td><\/tr>");};if ((format == "Detail") && (linecount > 3)) {tmp = cartvalues.substring(start,end);colon = tmp.indexOf(":", 0);document.write("<tr>");document.write("<td class=\"bb-miniqty\">");document.write(tmp.substring(0,colon));document.write("<\/td><td class=\"bb-miniprd\">");colon2 = tmp.indexOf(":", colon+1);document.write(tmp.substring(colon2+1,end - start));document.write("<\/td><td class=\"bb-miniprc\">");document.write(tmp.substring(colon+1,colon2)); document.write("<\/td><\/tr>");}start = end;}else {break;};}if (format == "Detail") {document.write("<tr>");document.write("<td colspan=\"2\" class=\"bb-minisubtxt\"><a href=\"[-- SHOPPING_CART_URL --]\" title=\"[-- STORE.ViewCartText --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">Subtotal<\/a><\/td>");document.write("<td class=\"bb-minisub\"><a href=\"[-- SHOPPING_CART_URL --]\" title=\"[-- STORE.ViewCartText --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">");tmp = cartvalues.substring(start1,end1);colon = tmp.indexOf(":", 0);document.write(tmp.substring(colon+1,end1 - start1));document.write("<\/a><\/td><\/tr><\/table><\/div><\/div>");};if (format == "ItemCount"){document.write("<\/a>");}}document.write("<\/div>");}[-- END_IF --]
[-- IF SC_Registration --]function DisplayRegistration(format,sepone,septwo) {var name="[-- RegCookieName --]";var cookies=document.cookie;var start = cookies.indexOf(name + "=");var name = "";var start1;var end1;var tmp;var signed_in = -1;if (start != -1) {start = cookies.indexOf("=", start) +1;var end = cookies.indexOf("|", start);if (end != -1) {signed_in = cookies.indexOf("|yes", start);name = unescape(cookies.substring(start,end));if (signed_in != -1) {if (format == "flyout") {document.write("<span id=\"bb-regflyout\"><a id=\"bb-reglink\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=3&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.YourAccount REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.YourAccount --]<\/a><div><ul>");document.write("<li><a id=\"bb-regview\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=3&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.ViewEdit REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.ViewEdit --]<\/a><\/li>");[-- IF WishList --]document.write("<li><a id=\"bb-regywl\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL Base --]/wishlist.cgi?storeid=[-- STORE.ID --]&amp;func=ywl\" title=\"[-- STORE.wl_WishList REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.wl_WishList --]<\/a><\/li>");[-- END_IF --]document.write("<li><a id=\"bb-reglout\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=4&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.SignOut REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.SignOut --]<\/a><\/li><\/ul><\/div><\/span>");}else {document.write("<span id=\"bb-regname\">" + name + "<\/span><a id=\"bb-regview\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=3&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.ViewEdit REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.ViewEdit --]<\/a>");[-- IF WishList --]document.write("" + sepone + "<a id=\"bb-regywl\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL Base --]/wishlist.cgi?storeid=[-- STORE.ID --]&amp;func=ywl\" title=\"[-- STORE.wl_WishList REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.wl_WishList --]<\/a>");[-- END_IF --]document.write("" + sepone + "<a id=\"bb-reglout\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=4&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.SignOut REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.SignOut --]<\/a>");};}}};if (signed_in == -1) {if (format == "flyout") {document.write("<span id=\"bb-regflyout\"><a id=\"bb-reglink\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=2&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.YourAccount REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.YourAccount --]<\/a><div><ul>");document.write("<li><a id=\"bb-reglin\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=2&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.ToSignIn REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.ToSignIn --]<\/a><\/li>");[-- IF WishList --] document.write("<li><a id=\"bb-regywl\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL Base --]/wishlist.cgi?storeid=[-- STORE.ID --]&amp;func=wl\" title=\"[-- STORE.wl_WishList REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.wl_WishList --]<\/a><li>");[-- END_IF --]document.write("<li><a id=\"bb-regreg\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=1&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.ToRegister REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.ToRegister --]<\/a><\/li><\/ul><\/div><\/span>");}else {document.write("<a id=\"bb-reglin\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=2&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.ToSignIn REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.ToSignIn --]<\/a>" + septwo);document.write("<a id=\"bb-regreg\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL BASE --]/order.cgi?func=1&amp;storeid=[-- STORE.ID --]&amp;html_reg=html\" title=\"[-- STORE.ToRegister REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.ToRegister --]<\/a>");[-- IF WishList --] document.write("" + sepone + "<a id=\"bb-regywl\" class=\"bb-reglink\" href=\"[-- SHOPPING_CART_URL Base --]/wishlist.cgi?storeid=[-- STORE.ID --]&amp;func=wl\" title=\"[-- STORE.wl_WishList REMOVE_HTML --]\"[-- IF ANALYTICS_MULTI_DOMAIN --] onclick=\"__utmLinker(this.href);\"[-- END_IF --] rel=\"nofollow\">[-- STORE.wl_WishList --]<\/a>");[-- END_IF --]};}}[-- END_IF --]


For the left navigation menu, it is by design that it moves to the bottom of the page, so that the page's top navigation and content are displayed first on mobile devices since those should be the most important elements on pages. You can change this, but it would require modifying the template, and possibly a little of the CSS.