Familiar 2 BB Theme - Add second top nav

Questions and answers about ShopSite Custom Templates

Familiar 2 BB Theme - Add second top nav

Postby psldesigns » Tue May 19, 2015 1:09 pm

I like how the Familiar theme 2 has registration, search, view cart, gift certificate in the top navigation. Problem is it doesn't give me enough room for the main navigation items. So what I was thinking is to add another row for the main navigation and remove it from the current one (it is just shrinking it down to the lines for mobile devices as it doesn't fit), putting it either just above or below the current navigation.

Can you please give me some advice on how I might accomplish this? I was thinking I could copy the current nav css and add a #2 to it ... but not sure what css I need to copy and how many places I would need to add it in the templates.

The demo store is here: http://smalldemo.smallfrypress.net/fortune-bracelets-FTN-BCT.htm (different from the last demo you helped me with. :O))

Thanks!
psldesigns
 
Posts: 116
Joined: Wed Aug 16, 2006 7:06 pm
Location: Michigan

Re: Familiar 2 BB Theme - Add second top nav

Postby ShopSite Lauren » Tue May 19, 2015 2:04 pm

You can go to Merchandising > Custom Templates > Includes, and make a copy of the BB-Header-Familiar.sst include file. Then make a copy of your copy and rename it the exact same name as the original. This will make it so that your version of the file overrides the original (don't worry, the original still exists, so you can always delete your file and start over).

You will then want to replace the following line:
Code: Select all
    <div id="fr-menu" class="olh"><div class="olhel">[-- INCLUDE BB-PageMenu-OneLineHeader.sst PROCESS --]</div>[-- IF SC_Registration --]<div id="fr-registration" class="olhel"><script type="text/javascript">DisplayRegistration("","","");</script></div>[-- END_IF --][-- IF PageLinks.Left --][-- ELSE_IF GiftCert --]<span id="bb-gclink" class="olhel"><a href="[-- SHOPPING_CART_URL Base --]/order.cgi?storeid=[-- STORE.Id --]&amp;cert=gift">[-- STORE.SC_GiftCertificate --]</a></span>[-- END_IF --]<div id="fr-mini" class="olhel">[-- INCLUDE BB-SearchField.sst PROCESS --][-- IF MiniCart --]<script type="text/javascript">DisplayMiniCart("ItemCount");</script>[-- END_IF --]</div></div>


With:
Code: Select all
    <div id="fr-menu2">[-- INCLUDE BB-PageMenu.sst PROCESS --]</div>
    <div id="fr-menu" class="olh">[-- IF SC_Registration --]<div id="fr-registration" class="olhel"><script type="text/javascript">DisplayRegistration("","","");</script></div>[-- END_IF --][-- IF PageLinks.Left --][-- ELSE_IF GiftCert --]<span id="bb-gclink" class="olhel"><a href="[-- SHOPPING_CART_URL Base --]/order.cgi?storeid=[-- STORE.Id --]&amp;cert=gift">[-- STORE.SC_GiftCertificate --]</a></span>[-- END_IF --]<div id="fr-mini" class="olhel">[-- INCLUDE BB-SearchField.sst PROCESS --][-- IF MiniCart --]<script type="text/javascript">DisplayMiniCart("ItemCount");</script>[-- END_IF --]</div></div>



That will put the navigation menu above the registration/search/minicart bar.

You will also likely want to make a copy of the publish file bb-familiar2.css (copy your copy and rename it the exact same name as the original), and add the following line to so that both navigation menus have a background color:
Code: Select all
div#fr-menu2 {display: block; width: 100%; text-align: left; height: 44px; padding: 0px 0px 0px 4px; background: #96D9DD;}
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Familiar 2 BB Theme - Add second top nav

Postby psldesigns » Wed May 20, 2015 8:31 am

Thanks Lauren! That worked on a pc.

I did, however, check it in mobile, and the original nav line that has the sign in, register, search, view cart isn't showing properly (I didn't check it BEFORE I changed it, so not sure if this was an issue before the additional nav bar). The words for register and gift cert are on top of each other. The .css for that line looks like this:

Code: Select all
div#fr-menu {display: block; width: 100%; text-align: left; height: 44px; padding: 0px 0px 0px 4px; background: #[-- STORE.Color1 --];}


I changed the height to auto in the @media screen and (max-width : 500px) section, but that didn't fix it. Any ideas?

Maybe it has to do with the class:
Code: Select all
div#fr-menu .olhel {display: inline-block; zoom: 1; *display: inline; padding: 0px; margin: 0px; max-height: 44px; float: left; clear: none;}


JUST FIGURED IT OUT ... it is the max-height setting in that above class if I remove it for mobile, then it displays properly. :O)

Thanks!
psldesigns
 
Posts: 116
Joined: Wed Aug 16, 2006 7:06 pm
Location: Michigan

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Wed May 27, 2015 6:36 am

Hello Pam,

Hope you don't mine, but I went to the URL you provided in the above post to see how your site worked. I also have an issue with the navigation bar being filled up with registration and was considering if I wanted to get into custom template to resolve it.

However, in looking at your site url, I wondered if your site has the same problem I encountered using Chrome on a smart phone, and it does. I wonder if you can test this, using Chrome on a smart phone. Try to select the popdown that is below the screen, like "wedding invitations". Since Chrome on a smart phones does not have a scroll bar, using your finger to scroll down also triggers a click on the area you are scrolling. This is not the case using Safari or Firefox on a smart phone. It is a Chrome thing.

If you can, please let me know if you encounter this issue. I have posted an inquiry in the User Forum under the title "Navigation issue using Chrome on a Smart Phone".

Thanks in advance,
FredW
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm

Re: Familiar 2 BB Theme - Add second top nav

Postby psldesigns » Wed May 27, 2015 8:23 am

Hi Fred ... no problem at all you viewing it, just remember it currently is a demo site and isn't pretty! :O)

Thanks for pointing this out ... it really is a strange thing and I hadn't noticed it. Sometimes I can get it to scroll and stay, other times I cannot. It seems if I expand the category, then click and pull up on one of the subcategories to scroll slowly, it will scroll, and I can get to the bottom then click on wedding invitations but you must click it quickly. It doesn't always work so not a great thing.

Also, my main link, invitations, is a link, but when clicked on a phone, it just expands or un-expands the subcategories under it, I cannot actually get to the main category page on a phone which is a problem.

So a question to Lauren or Jim ... is there a way to turn OFF the subcategories popping up on a phone and just have it link to the links for the parent category on mobile devices?

I don't have apple devices ... does anyone know what happens on those? Is the main category clickable to the category page? Does it scroll and allow you to easily get to the subcategories?
psldesigns
 
Posts: 116
Joined: Wed Aug 16, 2006 7:06 pm
Location: Michigan

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Wed May 27, 2015 9:33 am

Hi Pam,

I tested this on my wife's iPhone 4s and it works fine using the default Safari browser. I have yet to try Chrome on an iPhone. I'll download it and let you know.

My search of the internet has not shown anybody reporting or having this issue also. I'm not sure how long it has been around, I just started testing this a few days ago.

I have yet to find a way to click on any dropdown selection that falls below the screen. Chrome has 30% of the smart phone market share, which is not something I would want to exclude from our smart phone visitors. If I find anything else on this, I'll get back to you.

What phone did you try it on? Thanks for confirming what I was seeing.

Fred
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Wed May 27, 2015 11:12 am

Hello again Pam,

I just downloaded Chrome on my wife's iPhone 4s and it works fine! Quite a surprise. It may be a Samsung or Android issue. And, I also just tested it on a four year old DroidX using the default browser (which I think is a Safari variant) and the I get similar problems as I saw on Chrome on my Samsung phones.

I am about ready to take an approach where one should not have dropdown menu choices that fall below the screen on any smart phone. It looks too risky to get it to work.

Fred
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm

Re: Familiar 2 BB Theme - Add second top nav

Postby psldesigns » Wed May 27, 2015 11:30 am

Thanks for the update. I have android, a motox phone.

Although not having the menu below the fold might help some issues, it will not help the issue of not being able to click on the main category and go to the main category page.
psldesigns
 
Posts: 116
Joined: Wed Aug 16, 2006 7:06 pm
Location: Michigan

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Wed May 27, 2015 1:19 pm

Yes, Pam, I agree. I saw that problem on my Motorola Droidx, a 4 year old phone. I'm not sure what browser they use. I also see a behavior problem on a Kindle with menu selections where the top menu is a link and also give dropdown submenues, but it takes some finger tapping to figure out how to get it to work. It is not easy to figure out. That same behavior happens on a Nook.

I'm not sure I like how different devices and browsers work when there is a major menu link combined with dropdown links. I hate to admit it, but it may be best to avoid the whole issue by just not using them.

I would like to know if this is a ShopSite implementation issue or is it common with other mobile sites that have dropdown menus.

Fred
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm

Re: Familiar 2 BB Theme - Add second top nav

Postby ShopSite Lauren » Thu May 28, 2015 1:06 pm

Fred, it looks like it is an issue with both the browser and ShopSite's code, so it will need to be logged as a bug and updated in the template.

In the meantime, the issue is being caused because the navigation menu javascript updates the navigation display when the window resizes. Along with the window resizing, the navigation menu gets reset so that if the navigation menu was closed in a narrow view, then the view widened (such as rotating the phone or tablet to be in landscape mode), and if the navigation is narrow enough to display as a desktop instead of with the hamburger icon, then the menu that was closed in the narrow view needs to be unclosed (not necessarily opened, because the default is to be displayed in desktop view) when the device was rotated. I hope that long description made sense. In short, every time the browser width changes, ShopSite's menu code rechecks the menu by first resetting the menu, then changing the menu display if the width required a different menu display. The issue is the the chrome browser is rendering a browser width change when you open the menu. I don't know why this is, I just know that the code to indicate that the browser width has changed, is activated when the menu is opened and you go to scroll in a mobile device.

The work-a-round:
To get around this, you can leave the ShopSite code to detect the browser width changing, and you can leave the code to change the menu style when necessary, but you would remove the code that 'resets' that main menu each time the browser width 'resizes'.

- Go to Merchandising > Custom Templates > Includes > Copy Publish File, and make a copy of the bb.js include file. Then copy your copy and rename it the exact same name as the original so that it overrides the original.

- In the bb.js publish file, find the line that looks like the following:
function verticalNav() {menuReset(); $("div.suckertreemenu ul#ShopSite").hide().parent().attr("id","verticalNav"); $(".bb-navfolder").children("a").click(function() {$(this).parent().children("ul").toggle(); return false;}); $("#bb-fade").click(function() {openVertical();});}

- Remove the .hide() so that the code looks like:
function verticalNav() {menuReset(); $("div.suckertreemenu ul#ShopSite").parent().attr("id","verticalNav"); $(".bb-navfolder").children("a").click(function() {$(this).parent().children("ul").toggle(); return false;}); $("#bb-fade").click(function() {openVertical();});}

- Save changes, then republish/regenerate your store.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Fri May 29, 2015 7:51 am

Hi Lauren,

Thanks for the work-around. I tried it (my edits for that line are pasted below)
function verticalNav() {menuReset(); $("div.suckertreemenu ul#ShopSite").parent().attr("id","verticalNav"); $(".bb-navfolder").children("a").click(function() {$(this).parent().children("ul").toggle(); return false;}); $("#bb-fade").click(function() {openVertical();});}

However, the behavior is now different. You were correct in your other post, before I made the change, when I tried to scroll down the dropdown menu, I would get the same page I was on. Now, after the change, when I scroll down the submenu (or dropdown menu) to see those below the screen, as soon as I life my finger to select one, the submenu disappears. I can get it to work some times, by not lifting my scrolling finger then using another finger to quickly tap a lower selection and hold my tough just right, I can get it to go to the submenu selected. But mostly he submenu just disappears. Of the 20 times I tried, I could get it to go to the submenu 2 times, the rest of the time, it just disappears.

You are welcome to try it at keithdemo.keithspecialty.com select the HVAC to get dropdown submenu choices.

Also, in case I didn't tell you, Chrome works OK on a iPhone so it looks like a Chrome/Android issue. I think there are also issues using the default browser on a Motorola device. I have an four year old Droidx and the default browser on it (Safari?) has the same issue.

If there is anything I can do to help you figure out a way to get around this, I would be pleased to help.

Fred
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Mon Jun 01, 2015 1:07 pm

Questions for Laruen:
You wrote:
Fred, it looks like it is an issue with both the browser and ShopSite's code, so it will need to be logged as a bug and updated in the template.


A few questions come to mine:
1) how does this get logged as a bug?
2) How can we find out when it is fixed?
3) Finally, a general question regarding copying templates, making our own modifications to templates like you suggest (
Go to Merchandising > Custom Templates > Includes > Copy Publish File, and make a copy of the bb.js include file. Then copy your copy and rename it the exact same name as the original so that it overrides the original....and make our changes to that published file
, then, if later a bug is reported and fixed in that bb.js file, do we have to go through the process again to pic up the bug and then reapply any changes we made?
Guess, I'm not sure I understand how the same name file gets overridden from that SS provides.

Thanks in advance,
Fred
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm

Re: Familiar 2 BB Theme - Add second top nav

Postby ShopSite Lauren » Tue Jun 02, 2015 1:45 pm

Fred, the bug has already had a fix checked into the software, so the fix will be available in the release after r4. You can subscribe to the tech bulletin in ShopSite to get emails whenever there are releases available. http://www.shopsite.com/subscribe.html
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Familiar 2 BB Theme - Add second top nav

Postby FredW » Tue Jun 02, 2015 3:56 pm

Thanks Lauren,

Very helpful. Your support is great!

Fred
FredW
 
Posts: 188
Joined: Mon Apr 02, 2012 2:07 pm


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 10 guests

cron