Mobile Hide Content

[MgmtSpec]

Hello,

Still struggling with header layout issues using "Fearless" theme.
I'd try a different template but I've made a number of custom Product templates and don't want to have to redo those also.

Problem: The "hamburger" menu overlaps Company name and tag line which are entered in the "header" layout.

So I'm trying to hide some text to make the menu easier to use.

Using a media query that I've used on other sites, validates and works.

First I added CSS to the bb.css

.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}

URL: http://www.floridatorqueconverters.com/publish/bb.css

In the header I added the mobileHide class in a div

<h1 style="font-weight:bold; bottom-margin:5px">Florida Torque Converter</h1>
<div class="mobileHide"><h3 style="font-size:.85em; font-style:italic; top-margin:3px">Best Darn Torque Converters<br>in the World!</h3></div>

I've also tried added top/bottom margins with no success either.

Page is at:
http://www.floridatorqueconverters.com

Suggestions?

[ShopSite Lauren]

I would suggest moving the navigation menu, extra links (which you aren't using currently, such as the registration and gift certificate links) and search to the right side of the header instead of keeping them in the left with the other header content. You can do this with the following steps:

1. Go to Merchandising > Custom Templates > Includes > New Include, and create a new include file called "BB-Header-Fearless.sst" this new include file will replace/override the original. (You can always undo this by simply deleting this file. It will not delete the original.)

2. Edit your newly created BB-Header-Fearless.sst include file, pasting in the following code. Save changes and regenerate your store (Utilities > Publish > Regenerate).

Code: Select all

<script type="text/javascript">var $ = ss_jQuery, jQuery = ss_jQuery;</script>[-- VAR.FooterCloseDiv "yes" --]
<header><div id="fl-header" class="olh">
    <div id="fl-leftheader" class="olhel">
        [-- VAR.MakeLogo "yes" --][-- IF STORE.UseCompanyLogo --][-- IF STORE.CompanyLogo --]<div id="fl-logoin"><a href="[-- IF STORE.CompanyURL --][-- STORE.CompanyURL --][-- ELSE --][-- MyStoreURL --][-- END_IF --]"[-- IF STORE.Name --] title="[-- STORE.Name REMOVE_HTML --]"[-- END_IF --]>[-- STORE.CompanyLogo ONLY_ALT_TAG --]</a></div>[-- VAR.MakeLogo "no" --][-- END_IF --][-- END_IF --][-- IF VAR.PageHeader "yes" --]<div id="fl-headerin">[-- HEADER --]</div>[-- VAR.MakeLogo "no" --][-- END_IF --][-- IF STORE.HeaderImage --]<div id="fl-headerimgin">[-- IF STORE.HeaderURL --]<a href="[-- STORE.HeaderURL --]">[-- END_IF --][-- STORE.HeaderImage ONLY_ALT_TAG --][-- IF STORE.HeaderURL --]</a>[-- END_IF --]</div>[-- VAR.MakeLogo "no" --][-- END_IF --][-- IF VAR.MakeLogo "yes" --]<div id="fl-makelogoin"><a href="[-- MyStoreURL --]" title="[-- STORE.Name REMOVE_HTML --]">[-- STORE.Name --]</a></div>[-- END_IF --]
    </div>
    <div id="fl-rightheader" class="olhel">
        [-- INCLUDE BB-PageMenu-OneLineHeader.sst PROCESS --]
        <span id="fl-bonuslinks">[-- IF WishList --][-- WishListLink --][-- END_IF --][-- IF PageLinks.Left --][-- ELSE_IF GiftCert --]<a href="[-- SHOPPING_CART_URL Base --]/order.cgi?storeid=[-- STORE.Id --]&amp;cert=gift">[-- STORE.SC_GiftCertificate --]</a>[-- END_IF --]</span>
        [-- IF VAR.SearchOnStorePages "yes" --]<span id="fl-searchtoggle">[-- STORE.Search --]</span><script type="text/javascript">$("#fl-searchtoggle").click(function() {$("#bb-searchform").toggleClass("fl-active");});</script>[-- END_IF --]
        [-- IF MiniCart --]<script type="text/javascript">DisplayMiniCart("ItemCount");</script>[-- END_IF --]</div>
</div>
[-- IF STORE.Type NE "STARTER" --][-- INCLUDE BB-SearchField.sst PROCESS --][-- END_IF --]
</header>

<div id="fl-padarea">