Menu icon Foundation
Inline-list navigation

Hi there!

I've just started using Foundation 5 recently. There's probably an easy way to do this but I can't find it (have trawled forum and documentation).

Basically, I've created a small navigation bar using an inline-list (see code attached).

All good on wide/large screens but, on small screens (say, max-width around 320px) I want the inline-list (which currently has display set to inline) to convert to display:block (see image attached).

I can't seem to get this sort of function happening in Foundation 5. Can anyone give me any tips?

    
  <div class="row">
    <div class="large-3 columns">
      <h1><img src="img/fumo-logo-250.jpg"></h1>
    </div>
    <div class="large-9 columns" id="top-nav">
      <ul class="inline-list right" id="top-nav-bar">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
 
  <div class="row" id="the-banner">
    <div class="large-12 columns">
      <img src="img/some-image.jpg">
    </div>
  </div>
            

         

Screen

inline-listnavigation

Hi there!

I've just started using Foundation 5 recently. There's probably an easy way to do this but I can't find it (have trawled forum and documentation).

Basically, I've created a small navigation bar using an inline-list (see code attached).

All good on wide/large screens but, on small screens (say, max-width around 320px) I want the inline-list (which currently has display set to inline) to convert to display:block (see image attached).

I can't seem to get this sort of function happening in Foundation 5. Can anyone give me any tips?

    
  <div class="row">
    <div class="large-3 columns">
      <h1><img src="img/fumo-logo-250.jpg"></h1>
    </div>
    <div class="large-9 columns" id="top-nav">
      <ul class="inline-list right" id="top-nav-bar">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
 
  <div class="row" id="the-banner">
    <div class="large-12 columns">
      <img src="img/some-image.jpg">
    </div>
  </div>
            

         

Screen
Calypso about 5 years ago

Sorry to post such a stupid, simplistic question ... I think I've got it sorted.

Just rewrote the foundation.css inline-list class rule within a media query. Not sure if this is 100% correct coding ... but it works:

@media screen and (max-width: 320px) {

.inline-list {
  margin: 0 auto 1.0625rem auto;
  margin-left: -1.375rem;
  margin-right: 0;
  padding: 0;
  list-style: none;
  overflow: hidden; }

  .inline-list > li {
   width:100%;
    display: block; 
  background: rgb(206, 168, 135);
  margin-bottom:5px;
  text-align:center;

  }
    .inline-list > li > * {
      display: block; }



}