Menu icon Foundation
Top Bar Fixed at Bottom small issue

Hey All,

I am putting together a site and opted for a bottom navigation. So I used the .top-bar class. I have it almost where I want you can take a look here http://rivierapointdoral.com/test/.

The question I have is the following: Is there a way to get the navigation to open from the top instead of the bottom once its in mobile mode?

Any insight would be greatly Appreciated, I'm digin' foundation.

Untitled 1

HTML:

<!-- Navigation -->
 <div class="fixed">
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <a href="#"><img src="img/logo.jpg"</a>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li ></li>
      
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
    <li class="divider"></li>
      <li class="active"><a href="#">OFFICES</a></li>
      <li class="divider"></li>
      <li><a href="#">SITEPLAN</a></li>
      <li class="divider"></li>
      <li><a href="#">ABOUT DORAL</a></li>
      <li class="divider"></li>
      <li><a href="#">LOCATION</a></li>
      <li class="divider"></li>
      <li><a href="#">CONTACT US</a></li>
      <li class="divider"></li>
    </ul>
  </section>
</nav>
 </div>
  <!-- End Top Bar -->
            

         

Css:

.fixed {
  width: 100%;
  left: 0;
  position: fixed;
  bottom: 0;
  z-index: 99; }
  .fixed.expanded:not(.top-bar) {
    overflow-y: auto;
    height: auto;
    width: 100%;
    max-height: 100%; }
    .fixed.expanded:not(.top-bar) .title-area {
      position: fixed;
      width: 100%;
      z-index: 99; }
    .fixed.expanded:not(.top-bar) .top-bar-section {
      z-index: 98;
      margin-top: 45px; }
            

         

Hope there's some Jedi out there with some ideas.

topbarfixed

Hey All,

I am putting together a site and opted for a bottom navigation. So I used the .top-bar class. I have it almost where I want you can take a look here http://rivierapointdoral.com/test/.

The question I have is the following: Is there a way to get the navigation to open from the top instead of the bottom once its in mobile mode?

Any insight would be greatly Appreciated, I'm digin' foundation.

Untitled 1

HTML:

<!-- Navigation -->
 <div class="fixed">
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <a href="#"><img src="img/logo.jpg"</a>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li ></li>
      
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
    <li class="divider"></li>
      <li class="active"><a href="#">OFFICES</a></li>
      <li class="divider"></li>
      <li><a href="#">SITEPLAN</a></li>
      <li class="divider"></li>
      <li><a href="#">ABOUT DORAL</a></li>
      <li class="divider"></li>
      <li><a href="#">LOCATION</a></li>
      <li class="divider"></li>
      <li><a href="#">CONTACT US</a></li>
      <li class="divider"></li>
    </ul>
  </section>
</nav>
 </div>
  <!-- End Top Bar -->
            

         

Css:

.fixed {
  width: 100%;
  left: 0;
  position: fixed;
  bottom: 0;
  z-index: 99; }
  .fixed.expanded:not(.top-bar) {
    overflow-y: auto;
    height: auto;
    width: 100%;
    max-height: 100%; }
    .fixed.expanded:not(.top-bar) .title-area {
      position: fixed;
      width: 100%;
      z-index: 99; }
    .fixed.expanded:not(.top-bar) .top-bar-section {
      z-index: 98;
      margin-top: 45px; }
            

         

Hope there's some Jedi out there with some ideas.

This post has been closed. No new replies can be added.

Daniel Mejia over 5 years ago

Just ended up fixing to the top on small screens instead, a different solution would have been tight but sometimes you just gotta move forward ya now, thanks all.

Daniel Mejia over 5 years ago

Hey Prathap,

Thats a great solution, i'm gonna keep that on the side. Only thing is I need it to stay fixed and full width at the bottom page on large and small screens. You have some solid ideas, any thoughts?

If you see the link at fullscreen you will see top-bar full width and fixed at bottom.
http://rivierapointdoral.com/test/

Any thoughts greatly appreciated.

Prathap over 5 years ago

@Daniel, try this code

<!-- Navigation -->
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>

  <div class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="right">
    <li class="divider"></li>
      <li class="active"><a href="#">OFFICES</a></li>
      <li class="divider"></li>
      <li><a href="#">SITEPLAN</a></li>
      <li class="divider"></li>
      <li><a href="#">ABOUT DORAL</a></li>
      <li class="divider"></li>
      <li><a href="#">LOCATION</a></li>
      <li class="divider"></li>
      <li><a href="#">CONTACT US</a></li>
      <li class="divider"></li>
    </ul>
  </div>

  <ul class="title-area">
    <li class="name">
      <!--<h1><a href="#">--><img width="200" src="http://rivierapointdoral.com/test/img/logo.jpg" /><!--</a></h1>-->
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"></a></li>
  </ul>

</nav>
 </div>
  <!-- End Top B
<style>
      .title-area,
      .top-bar li.name{ background: #0F2231 }
      .top-bar li.name img{ display: block }
      .top-bar.expanded .title-area{ clear:both; }
  </style>