Menu icon Foundation
Questions with sticky top-bar customization

What I am trying to achieve is to show
in large screen
logo + title buy now button (right aligned with a margin on the left)

in small screen
logo + title in the middle, still have buy now button (right aligned with a margin on the left)

My code is as below

Thanks for any help !

    <div class="row tm-sticky-topbar">
        <div class="large-12 columns">
            <div class="sticky ">
                <nav class="top-bar" data-topbar role="navigation" data-topbar data-options="sticky_on: large">
                    <ul class="title-area">
                        <!-- Title Area -->
                        <li class="name">
                            <h5> <img class="svg tm-logo-head" src="/logo.svg" alt=""><span class="tm-text-align">Title</span>  </h5>
                        </li>
                        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    </ul>

                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="right">
                            <li><a href="#" target="_blank" class="button round alert">BUY NOW</a></li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>
    </div>
            

         

stickytopbarbutton

What I am trying to achieve is to show
in large screen
logo + title buy now button (right aligned with a margin on the left)

in small screen
logo + title in the middle, still have buy now button (right aligned with a margin on the left)

My code is as below

Thanks for any help !

    <div class="row tm-sticky-topbar">
        <div class="large-12 columns">
            <div class="sticky ">
                <nav class="top-bar" data-topbar role="navigation" data-topbar data-options="sticky_on: large">
                    <ul class="title-area">
                        <!-- Title Area -->
                        <li class="name">
                            <h5> <img class="svg tm-logo-head" src="/logo.svg" alt=""><span class="tm-text-align">Title</span>  </h5>
                        </li>
                        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    </ul>

                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="right">
                            <li><a href="#" target="_blank" class="button round alert">BUY NOW</a></li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>
    </div>
            

         
Brandon Arnold almost 4 years ago

Hey Chris,
We wrote a tutorial on modifying TopBar a little ways back, some of these may help with what you're trying to achieve.

https://zurb.com/expo/lessons/de-coding-top-bar-customizations