Menu icon Foundation

My Posts

  • 1
    Reply
  • Inline-list navigation

    By Calypso

    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). ... (continued)

    Last Reply by Calypso about 5 years ago


My Comments

Calypso commented on Calypso's post about 5 years

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; }



}

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Calypso's post about 5 years

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; }



}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content