Menu icon Foundation
Sticky title-bar and tob-bar with hide toggle. Only one sticks.

Good evening. 

 

I've been working on a responsive web site, using the latest release of Foundation Framework.

I'm encountering the following issue.

I have a top bar for large and medium screen size and a title-bar for small size. They both should be stuck to the top of their container. But only the top-bar sticks, while the title-bar doesn't. Can't understand where the problem is; maybe something related to the page loading?

 

Here is the code of my navigation bar:

<div class="background fluid full" data-sticky-container>
    <div class="title-bar" data-sticky data-options="marginTop:0;" data-responsive-toggle="nav-bar" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle="nav-bar"></button>
        <div class="title-bar-title">My title</div>
    </div>
    <div class="top-bar fluid full" data-sticky data-options="marginTop:0;" id="nav-bar">
        <div class="top-bar-left">
            <div class="grid-x" >
                <div class="small-5 medium-5 large-5 columns">
                    <div class="logo">            
                        <a href="{{root}}index.html" class="text-hide"><img src="../assets/img/logo/Logo.png" alt="logo">
                        Logo</a>
                    </div>
                </div>
                <div class="small-7 medium-7 large-7 columns">
                    <div class="top-bar-right">
                        <ul class="menu align-right" id="nav-bar-menu">
                        <li><input id="search_input" type="search" placeholder="Search"></li>
                        <li><button type="button" class="button">Search</button></li>
                        </ul>
                    </div>
                </div>        
            </div>
            <div class="grid-x" >
                <div class="small-12 medium-12 large-12 columns">
                    <ul class="dropdown menu align-right" id="nav-bar-menu" data-dropdown-menu>
                        <li class="navbar_entry"><a href="{{root}}il-progetto.html">Link 0</a></li>
                        <li class="navbar_entry"><a href="{{root}}compagni.html">Link 1</a>
                            <ul class="menu" id="nav-bar-menu">
                                <li class="navbar_entry"><a href="{{root}}persone.html">Link 2</a></li>
                            </ul>
                        </li>
                        <li class="navbar_entry"><a href="{{root}}servizi.html">Link 3</a></li>
                        <li class="navbar_entry"><a href="{{root}}galleria.html">Link 4</a></li>
                        <li class="navbar_entry"><a href="#">Link 5</a></li>
                    </ul>                        
                </div>
            </div> <!--grid-x-->       
        </div> <!--top-bar-left end-->
    </div>
</div>

 

Thanks,
Marco

stickybarstitle-bartop-bar

Good evening. 

 

I've been working on a responsive web site, using the latest release of Foundation Framework.

I'm encountering the following issue.

I have a top bar for large and medium screen size and a title-bar for small size. They both should be stuck to the top of their container. But only the top-bar sticks, while the title-bar doesn't. Can't understand where the problem is; maybe something related to the page loading?

 

Here is the code of my navigation bar:

<div class="background fluid full" data-sticky-container>
    <div class="title-bar" data-sticky data-options="marginTop:0;" data-responsive-toggle="nav-bar" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle="nav-bar"></button>
        <div class="title-bar-title">My title</div>
    </div>
    <div class="top-bar fluid full" data-sticky data-options="marginTop:0;" id="nav-bar">
        <div class="top-bar-left">
            <div class="grid-x" >
                <div class="small-5 medium-5 large-5 columns">
                    <div class="logo">            
                        <a href="{{root}}index.html" class="text-hide"><img src="../assets/img/logo/Logo.png" alt="logo">
                        Logo</a>
                    </div>
                </div>
                <div class="small-7 medium-7 large-7 columns">
                    <div class="top-bar-right">
                        <ul class="menu align-right" id="nav-bar-menu">
                        <li><input id="search_input" type="search" placeholder="Search"></li>
                        <li><button type="button" class="button">Search</button></li>
                        </ul>
                    </div>
                </div>        
            </div>
            <div class="grid-x" >
                <div class="small-12 medium-12 large-12 columns">
                    <ul class="dropdown menu align-right" id="nav-bar-menu" data-dropdown-menu>
                        <li class="navbar_entry"><a href="{{root}}il-progetto.html">Link 0</a></li>
                        <li class="navbar_entry"><a href="{{root}}compagni.html">Link 1</a>
                            <ul class="menu" id="nav-bar-menu">
                                <li class="navbar_entry"><a href="{{root}}persone.html">Link 2</a></li>
                            </ul>
                        </li>
                        <li class="navbar_entry"><a href="{{root}}servizi.html">Link 3</a></li>
                        <li class="navbar_entry"><a href="{{root}}galleria.html">Link 4</a></li>
                        <li class="navbar_entry"><a href="#">Link 5</a></li>
                    </ul>                        
                </div>
            </div> <!--grid-x-->       
        </div> <!--top-bar-left end-->
    </div>
</div>

 

Thanks,
Marco