Menu icon Foundation
top-bar - contain-to-grid and fixed forces menu to bottom on small screen

I am using the code below for top-bar. I have the code placed at the bottom of the page for seo purposes.

The menu appears at the top and works correctly in a large view, but when down to a medium or small, when the menu icon is clicked the expanded menu drops to the bottom of the page. I know I can fix this by placing the menu code at the top but I would prefer to keep it at the bottom.

Can anyone make a suggestion on how to accomplish the goals of fixing the menu to the top, code residing at the bottom of the code, not jumping to the bottom when clicked in medium or small views.

Thank you for any suggestions..

Regards,
Steve

<div class="contain-to-grid fixed"> <!-- nav wrapper -->
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name"></li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="right">
                <li><a href="enroll.php" class="button alert">ENROLL NOW</a></li>
                <li class="has-dropdown">
                    <a href="members.php">Members</a>
                    <ul class="dropdown">
                        <li><a href="#">First link in dropdown</a></li>
                    </ul>
                </li>
            </ul>
            <!-- Left Nav Section -->
            <ul class="left">
                <li><a href="/">Site Title</a></li>
            </ul>
        </section>
    </nav>
</div> <!-- end nav wrapper -->

top-bar

I am using the code below for top-bar. I have the code placed at the bottom of the page for seo purposes.

The menu appears at the top and works correctly in a large view, but when down to a medium or small, when the menu icon is clicked the expanded menu drops to the bottom of the page. I know I can fix this by placing the menu code at the top but I would prefer to keep it at the bottom.

Can anyone make a suggestion on how to accomplish the goals of fixing the menu to the top, code residing at the bottom of the code, not jumping to the bottom when clicked in medium or small views.

Thank you for any suggestions..

Regards,
Steve

<div class="contain-to-grid fixed"> <!-- nav wrapper -->
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name"></li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="right">
                <li><a href="enroll.php" class="button alert">ENROLL NOW</a></li>
                <li class="has-dropdown">
                    <a href="members.php">Members</a>
                    <ul class="dropdown">
                        <li><a href="#">First link in dropdown</a></li>
                    </ul>
                </li>
            </ul>
            <!-- Left Nav Section -->
            <ul class="left">
                <li><a href="/">Site Title</a></li>
            </ul>
        </section>
    </nav>
</div> <!-- end nav wrapper -->
Steve Funk over 5 years ago

Holly crap, how did that happen.. Sorry everyone.

Answers will still be appreciated and flames will be expect. ;-)

Steve

Steve Funk over 5 years ago

Ah found the edit link.... Steve