Foundation 6 Sticky Topbar not behaving properly at small browser resize

Question

I have a sticky topbar on my website. It works fine on Large and Medium but when it gets down to small it developes a 54px height. I set class sticky-container to height: 0; and it works if i refresh the browser. When I navigate away and back again the 54px gap shows up again. Any Ideas? Thanks-Adolfo

html:

    <!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
    <a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar" id="nav-menu">
            <div class="logo-wrapper hide-for-small-only">
                <div class="logo">
                    <img src="/assets/img/fingerLogoSM.2.gif">
                </div>
            </div>
            <!-- Left Nav Section -->
            <div class="top-bar-left">
                <ul class="vertical medium-horizontal menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                </ul>
            </div>
            <!-- Right Nav Section -->
            <div class="top-bar-right">
                <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
                    <li class="has-submenu">
                        <a href="#">Technologies Used...</a>
                        <ul class="submenu menu vertical medium-verticle" data-submenu>
                            <li><a href="foundation.html">Foundation</a></li>
                            <li><a href="html5.html">HTML5</a></li>
                            <li><a href="css3.html">CSS3</a></li>
                            <li><a href="javascript.html">JavaScript</a></li>
                            <li><a href="wordpress.html">WordPress</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

css:

    /* Small Navigation */
.logo-small {
  float: right;
  padding: 4px; }

.title-bar {
  padding: 0 .5rem;
  background-color: #3D3242; }

.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
  padding: 4px; }

/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
  .logo-wrapper {
    position: relative; }
  .logo-wrapper .logo {
    width: 92px;
    height: 92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -6px;
    margin-left: -46px; }
  .top-bar-right {
    width: 50%;
    padding-left: 60px; }
  .top-bar-right ul {
    float: left; }
  .top-bar-left {
    width: 50%;
    padding-right: 60px; }
  .top-bar-left ul {
    float: right; } }

My website address is http://adolfobarreto.atwebpages.com

you dont need it to show in mobile view, why not just hide it? you are using a diffrent menu for mobile — BinaryGhost, Jan 12 '16 at 19:55
thats a good Idea...you mean like a media query? The thing is i wanted to work within the foundation framework. Why hack it when I'm sure there's a proper way to do it. I just happen to be a Foundation noob..lol. Thank you for the suggestion. I appreciate it! — Adolfo J Barreto, Jan 12 '16 at 20:03
Glad to help :), i have also posted a detailed answer with 2 methods — BinaryGhost, Jan 12 '16 at 20:08
Never mind...You're right BinaryGhost. I found it under "Hide by Screen Size". I'm going to test it and answer my own question here. Thanks Again! — Adolfo J Barreto, Jan 12 '16 at 20:08

score 2 · Accepted Answer · answered Jan 12 '16 at 20:07

2

Like i said in the comment, you can just hide the div.

You can use the foundation visibility classes

just add the class

hide-for-small-only

on the sticky div. more info can be found here:http://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html

Or you can use media quires

@media screen 
and (max-width : 640px) {
    .sticky-container{display:none;}
}

This will hide the div when the screen width is less then 640px;

answered Jan 12 '16 at 20:07

BinaryGhost

801
4
9

Thanks, I was just about to do that. – Adolfo J Barreto Jan 12 '16 at 20:10
BinaryGhost, I tried hide-for-small-only and it did not work. Still doing the same thing...check it out http://adolfobarreto.atwebpages.com – Adolfo J Barreto Jan 12 '16 at 20:40
1

You should put it here -
(line 8 in your html example) ||| you have put it in the inner div, so the inner div got hidden but the parent not
– BinaryGhost Jan 12 '16 at 20:41
Yes! That was it. It's working properly now. Thank you BinaryGhost! – Adolfo J Barreto Jan 12 '16 at 20:47
Ok, I did not check if the hamburger menu was working. I found that it was not working. It turns out that the proper code is
. lol
– Adolfo J Barreto Jan 12 '16 at 21:44
1

Looks like you got 2 options to fix the menu. You can add the 'nav' to the title bar, just change the id. Or you can add the 'title-bar' to the 'stick-container' and show him only in mobile. But you will need to display the ' sticky-container' – BinaryGhost Jan 13 '16 at 08:14
Thank you BinaryGhost...I'm working on it. I appreciate your help. – Adolfo J Barreto Jan 13 '16 at 17:48

Foundation 6 Sticky Topbar not behaving properly at small browser resize

1 Answers1