top-bar - small screens don't show icons

[bobdonkey]

Hi there, having some trouble with the foundation top-bar. Works fine when using large screens, but using small screens the basket, search, and hamburger menu icons don't show at all. Site is www.barebonesuk.com, running 6.0.2, started from the foundation theme in 6.0.2. I basically inserted the top-bar code, and moved the logo, basket etc code into it.

Any pointers please?
 
My top-bar code is:

<!-- Top bar-->
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
<ul class="title-area">
<li class="name">
<h1><a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" height="47" width="326" alt="{$META_TITLE}"></a></h1>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">


<div class="row">
<div class="right text-center">{include file='templates/box.basket.php'}</div>
<div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><i class="fa fa-bars fa-2x"></i></a> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a></div>
{include file='templates/box.currency.php'}
{include file='templates/box.language.php'}
{include file='templates/box.session.php'}
</div>
</ul>

<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
{include file='templates/box.search.php'}
</div>
</div>
</li>
</ul>
</section>

</nav>
</div>
<!-- End of top bar -->

[bsmither]

Here's what I see:

.top-bar { /* foundation.css line 1715 */

    background: none repeat scroll 0 0 #333333;

    height: 2.8125rem;

    line-height: 2.8125rem;

/*  margin-bottom: 0; // overruled elsewhere */

    overflow: hidden;

    position: relative;

}

 

The height, if it were taller, 9rem; for example, would show what you are wanting to see.

 

I also think the <section> tags are interfering. But not really sure.

 

Also, generally, if something is to float, it should be coded above the content that is expected to flow around what is being floated. Otherwise, it will get displayed after what is coded above it if what is coded above it won't give it enough space, or something else causes it to start a new line.

 

So, maybe put <ul class="title-area"> below <ul class="right"> and above <ul class="left">.

[bobdonkey]

Well, not sure about that, but managed to get it almost there. I basically moved the fa-shoppingcart from box-basket.pxp. into main.ptp, into the same div as the small search and hamburger icons.

Still have 2 issues:

- Clicking on hamburger shows search as well

- Icons overlap the logo small screens. Possibly my logo is too large?

 

Anyway, getting there, at least it will be useable on phones and tablets now.

 

Has anyone else done a cubecart theme using top-bar from foundation?

 

Cheers.

[bsmither]

The area containing the icons isn't shrinking down like everything else when the width of the screen goes smaller.