Menu icon Foundation

Designer

My Posts




  • 3
    Replies
  • Breadcrumb Issue

    By Bridget

    breadcrumbs; line spacing;

    On the breadcrumb, I am trying to get line spacing between words when viewing on iPhone. Below is the snapshot of how it appears...the line spacing is too tight. I tried the line spacing but didn't work? I am including the code to see where I would nee... (continued)

    Last Reply by jessica ndaye over 4 years ago




  • 5
    Replies
  • Search Box Coding

    By Bridget

    Search box code

    I am looking for search box coding - the one where people can type in what they're looking for on website. See the image attached to know what I'm talking about. I didn't seem to find the code for it on Foundation/Zurb's docs / template.

    Last Reply by Dan Jackson about 1 year ago


  • 1
    Reply
  • Homepage Image doesn't fill up iPhone Screen

    By Bridget

    grid

    Hi - Homepage on desktop fills up the whole desktop screen and looks okay. However, on iPhone, it doesn't fill up the entire iPhone screen. The images are at 1440px wide by 900px height. What do I need to do to make the homepage images fill up entir... (continued)

    Last Reply by maypond over 4 years ago




My Comments

Bridget commented on Bridget's post over 3 years

Thank you, Robbert!

Bridget commented on Bridget's post over 3 years

Thank you, Rafi. Still shows the white bottom bar with and without the "background-size: cover;". It is orbit slideshow with 4 slides rotating. I have been stuck on this problem and could really use help here. Below is the Source code to include along with the CSS code shown above. What do I do?

<!doctype html>




Brownstone Furniture | Home

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-53099607-1', 'auto');
ga('send', 'pageview');

<!-- this is where your style overrides go -->
















$(document).foundation();

Bridget commented on Bridget's post about 4 years

Hi Rafi,

The text over code in the Codeine you provided in the link above is helpful. I need help with resolving the JS part in order to make it work. Where do I put the JS code: $(document).foundation(); in? Do I include that code into one of Foundation's JS files or do I create a new JS file? If you can provide the JS file for this would be terrific.

Thank you,

Bridget

Bridget commented on Bridget's post over 4 years

Below is the code for search box, added in a large-8 before the large-4. Which one of forms do I find on Foundation's CSS file to float the form to right?

Bridget commented on Bridget's post over 4 years

Is there a code to include in photo and link in email body, after the mailto: code? (for the email this item link for people to send to their friends/associates)

Bridget commented on Bridget's post over 4 years

Thank you, Rafi! That worked. However, the search box displays on left, I tried the float right in postfix button in the Foundation CSS and still didn't move to right. How can I get it to display on right?

Bridget commented on Rafi Benkual's post over 4 years

Looks GREAT!!! KUDOS to Alex!!!

Bridget commented on Bridget's post almost 5 years

Bimal, thank you for the info above, good one. What I'm trying to get the coding to use as seen in the links below with main window, not slider but main window with thumbnails that clicking a thumbnail the image on main window change into different image without sliding left or right. Make sense? See below.

I'm looking for code to use in my HTML file/layout I'm working on. Below are two link to see the main image with thumbnails, which clicking on a thumbnail the main image box change to a respective image. Does anyone know the code to provide would be helpful?

http://www.williams-sonoma.com/products/harvest-dining-table/?cm_src=AutoRel

http://www.restorationhardware.com/catalog/product/product.jsp?productId=prod690088&categoryId=cat1600008

Bridget commented on Bridget's post almost 5 years

Rafi,

Here is the updated code (please disregard the previous one I posted) with the advanced off canvas code. You'll see what I'm trying to do here. For the Mobile menu I'm trying to establish two menu icons, left menu icon for sidebar menu listing and right menu icon for top nav links with logo in the middle.

Currently it is showing up on both desktop and mobile. How to get it right with showing just on mobile, not on desktop and keep what I already have on desktop's top bar and sidebar.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brownstone Furniture | Bookcases</title>
    <link rel="icon" type="image/ico" href="http://www.brownstonefurniture.com/fav.ico"/>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="//cloud.typography.com/81626/672924/css/fonts.css" />
    <script src="js/vendor/modernizr.js"></script>
</head>
  <body>
  <div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
  <div class="row collapse">
    <div class="small-12 columns">
    <nav class="top-bar" <span class="hide-for-small-only"data-topbar>

      <ul class="title-area">
        <li class="name">
          <h1><a href="index.html"><img alt="Brownstone Furniture" src=
          "logos/brownstonelogo_254px.png"></a></h1>
        </li>

        <li class="toggle-topbar menu-icon"><a href="index.html"><span></span></a></li>
      </ul>


      <section class="top-bar-section">

        <ul class="right">

          <li class="active"><a href="viewbyrooms.html">VIEW BY ROOMS<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="products.html">PRODUCTS<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="dealerlocator.html">DEALER LOCATOR<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="about.html">ABOUT<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="contactus.html">CONTACT US<span class="hidden-for-large-up"> &#10095;</span></a></li>
        </ul>
      </section>
    </span> </nav>
    </div>
  </div>



  <div class="row">
    <div class="small-12 columns"><img src="img/bookcases/product_main_template3a.min.jpg"></div>
</div>   



  <div class="row">
    <div class="large-9 large-push-3 columns">



              <div class="row">
            <div class="large-12 columns">
            <br>
            <br>
           </div>
      </div>

          <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_chestnut.min.jpg" alt="Chelsea Chestnut">

              <div class="panel">
                <p>CHELSEA<br>
                CHESTNUT</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_onyx.min.jpg" alt="Chelsea Onxy">

              <div class="panel">
                <p><br>CHELSEA <br>
                ONYX</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_teak.min.jpg" alt="Chelsea Teak">
  <br>
              <div class="panel">
                <p><br>CHELSEA <br>
                TEAK</small></p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/harrison_bookcase.min.jpg" alt="Harrison">

              <div class="panel">
                <p><br>
                HARRISON</p>
              </div>
            </div>
      </div>

            <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/hudson_bookcase.min.jpg" alt="Hudson">

              <div class="panel">
                <p>HUDSON</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/luxembourg_bookcase.min.jpg" alt="Luxembourg">

              <div class="panel">
                <p>LUXEMBOURG</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/metropolitan_bookcase.min.jpg" alt="Metropolitan">

              <div class="panel">
                <p>METROPOLITAN</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/taylor_bookcase_500px.min.jpg" alt="Taylor">

              <div class="panel">
                <p>TAYLOR</p>
              </div>
            </div>
            </div>

           <div class="row">

              <div class="large-4 small-6 columns">
              <img src="img/bookcases/warren_bookcase_500px.min.jpg" alt="Warren">

              <div class="panel">
                <p>WARREN</p>
              </div>
            </div>

           <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>


      </div>



  <div class="row">
  </div>
    </div>

    <div class="large-3 large-pull-9 columns">
      <br>
      <dl class="accordion" data-accordion="">
        <dd>
          <a href="#panel1">BACHELOR'S CHESTS ›</a>
        </dd>

        <dd>
          <a href="#panel2">BEDS ›</a>
        </dd>

        <dd>
          <a href="#panel3">BENCHES ›</a>
        </dd>

        <dd>
          <a href="#panel4">BOOKCASES ›</a>
        </dd>

        <dd>
          <a href="#panel5">CABINETS ›</a>
        </dd>

        <dd>
          <a href="#panel6">CHESTS ›</a>
        </dd>

              <dd>
          <a href="#panel7">COFFEE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel8">CONSOLE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel9">DESKS ›</a>
        </dd>

              <dd>
          <a href="#panel10">DINING CHAIRS ›</a>
        </dd>

              <dd>
          <a href="#panel11">DRESSERS ›</a>
        </dd>

              <dd>
          <a href="#panel12">END TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel13">KITCHEN ISLANDS ›</a>
        </dd>

              <dd>
          <a href="#panel14">MIRRORS ›</a>
        </dd>

              <dd>
          <a href="#panel15">NIGHTSTANDS ›</a>
        </dd>

              <dd>
          <a href="#panel16">PLASMA CONSOLES ›</a>
        </dd>

              <dd>
          <a href="#panel17">SCREENS ›</a>
        </dd>

              <dd>
          <a href="#panel18">SIDEBOARD/SERVERS ›</a>
        </dd>

              <dd>
          <a href="#panel19">STOOLS ›</a>
        </dd>
      </dl>


      <p>&nbsp;</p>
    </div>
  </div>

  <div class="large-12 columns">
    <div class="panel">
      <div class="row">

        <div class="large-4 medium-4 columns">
              <h4>MARKET SHOWROOMS</h4><hr>
               <h5>WORLD MARKET CENTER<br>LAS VEGAS</h5>
               <h5>Building B, Showroom B-36</h5>
               <br>
               <h4>HIGH POINT MARKET<br>NORTH CAROLINA</h4>
               <h5>C &amp; D Building, Showroom 5A-5B</h5>
               <br>
        </div>

          <div class="large-4 medium-4 columns">
                <h4>BROCHURES & TEARSHEETS</h4><hr>
              <ul class="inline-list left">
              <li><a href="http://www.brownstonefurniture.com/tearsheets.html" target="_blank"><img src="img/footer/brochure_tearsheet.min.jpg" alt="Download Tearsheets and Brochures"></a>                                    </li>
              </ul>
        </div>

             <div class="large-4 medium-4 columns">
                 <h4>OPPORTUNITY BUYS</h4><hr>
                <ul class="inline-list left">
        <li><img src="img/footer/footer_opportunitybuys_02.min.jpg"></li>
                </ul>
        </div>

             <div class="large-4 medium-4 columns">
                <h4>CONNECT US</h4><hr>
                <ul class="inline-list left">
                <li><a href="https://www.facebook.com/pages/Brownstone-Furniture/220826074731821" target="_blank"><img src="logos/facebook_color.jpg"></a></li>
                <li><a href="http://www.pinterest.com/brownstonefurn/" target="_blank"><img src="logos/pinterest_color.jpg"></a></li>
                <li><a href="#"><img src="logos/twitter_color.jpg"><em></em></a></li>
                </ul>

      <div class="row collapse">
        <div class="small-10 columns">
          <input type="text" placeholder="Sign Up For Emails">
        </div>
        <div class="small-2 columns">
          <a href="http://www.info@brownstonefurniture.com" class="button postfix">GO</a>
    </div>
</div>
        </div>




        <div class="large-12 columns"><hr>
            <div class="row">

              <div class="large-6 columns">
                  <p>© 2014 Brownstone Furniture. All Rights Reserved.</p>
              </div>

              <div class="large-6 small-12 columns">
                    <ul class="inline-list right">
                    <li><a href=""><b>P:</b> 510.236.0703</a></li>
                    <li><a href=""><b>F:</b> 510.236.0772</a></li>
                    <li><a href=""><b>E:</b> info@brownstonefurniture.com</a></li>
                 </ul>
              </div>

            </div>
        </div>
      </footer>


     </div>
    </div>


  <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>

        <!-- <script src="js/foundation/foundation.js"></script>
    // <script src="js/foundation/foundation.topbar.js"></script> -->  </p>
    <script>
      $(document).foundation();
            </script>
</body>
</html>

Bridget commented on Bridget's post almost 5 years

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brownstone Furniture | Bookcases</title>
    <link rel="icon" type="image/ico" href="http://www.brownstonefurniture.com/fav.ico"/>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="//cloud.typography.com/81626/672924/css/fonts.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/foundation/foundation.offcanvas.js"></script>
</head>
  <body>
  <div class="row collapse">
    <div class="small-12 columns">
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <span class="hide-for-small-only"><h1><a href="index.html"><img alt="Brownstone Furniture" src=
          "logos/brownstonelogo_254px.png"></a></h1></span>
        </li></ul>

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

      <section class="top-bar-section">

        <ul class="right">

          <li class="active"><a href="viewbyrooms.html">VIEW BY ROOMS</a></li></span>

          <li class="active"><a href="products.html">PRODUCTS</a></li></span>

          <li class="active"><a href="dealerlocator.html">DEALER LOCATOR</a></li></span>

          <span class="hide-for-small-only"><li class="active"><a href="about.html">ABOUT</a></li></span>

          <span class="hide-for-small-only"><li class="active"><a href="contactus.html">CONTACT US</a></li></span>
        </ul>
      </section>
    </nav>
    </div>
  </div>

  <div class="row">
    <div class="small-12 columns"><img src="img/bookcases/product_main_template3a.min.jpg"></div>
</div>   



  <div class="row">
    <div class="large-9 large-push-3 columns">



              <div class="row">
            <div class="large-12 columns">
            <br>
            <br>
           </div>
      </div>

          <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_chestnut.min.jpg" alt="Chelsea Chestnut">

              <div class="panel">
                <p>CHELSEA<br>
                CHESTNUT</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_onyx.min.jpg" alt="Chelsea Onxy">

              <div class="panel">
                <p><br>CHELSEA <br>
                ONYX</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_teak.min.jpg" alt="Chelsea Teak">
  <br>
              <div class="panel">
                <p><br>CHELSEA <br>
                TEAK</small></p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/harrison_bookcase.min.jpg" alt="Harrison">

              <div class="panel">
                <p><br>
                HARRISON</p>
              </div>
            </div>
      </div>

            <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/hudson_bookcase.min.jpg" alt="Hudson">

              <div class="panel">
                <p>HUDSON</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/luxembourg_bookcase.min.jpg" alt="Luxembourg">

              <div class="panel">
                <p>LUXEMBOURG</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/metropolitan_bookcase.min.jpg" alt="Metropolitan">

              <div class="panel">
                <p>METROPOLITAN</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/taylor_bookcase_500px.min.jpg" alt="Taylor">

              <div class="panel">
                <p>TAYLOR</p>
              </div>
            </div>
            </div>

           <div class="row">

              <div class="large-4 small-6 columns">
              <img src="img/bookcases/warren_bookcase_500px.min.jpg" alt="Warren">

              <div class="panel">
                <p>WARREN</p>
              </div>
            </div>

           <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>







  <div class="row">
  </div>
    </div>

    <div class="large-3 large-pull-9 columns">
      <br>
      <dl class="accordion" data-accordion="">
        <dd>
          <a href="#panel1">BACHELOR'S CHESTS ›</a>
        </dd>

        <dd>
          <a href="#panel2">BEDS ›</a>
        </dd>

        <dd>
          <a href="#panel3">BENCHES ›</a>
        </dd>

        <dd>
          <a href="#panel4">BOOKCASES ›</a>
        </dd>

        <dd>
          <a href="#panel5">CABINETS ›</a>
        </dd>

        <dd>
          <a href="#panel6">CHESTS ›</a>
        </dd>

              <dd>
          <a href="#panel7">COFFEE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel8">CONSOLE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel9">DESKS ›</a>
        </dd>

              <dd>
          <a href="#panel10">DINING CHAIRS ›</a>
        </dd>

              <dd>
          <a href="#panel11">DRESSERS ›</a>
        </dd>

              <dd>
          <a href="#panel12">END TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel13">KITCHEN ISLANDS ›</a>
        </dd>

              <dd>
          <a href="#panel14">MIRRORS ›</a>
        </dd>

              <dd>
          <a href="#panel15">NIGHTSTANDS ›</a>
        </dd>

              <dd>
          <a href="#panel16">PLASMA CONSOLES ›</a>
        </dd>

              <dd>
          <a href="#panel17">SCREENS ›</a>
        </dd>

              <dd>
          <a href="#panel18">SIDEBOARD/SERVERS ›</a>
        </dd>

              <dd>
          <a href="#panel19">STOOLS ›</a>
        </dd>
      </dl>


      <p>&nbsp;</p>
    </div>
  </div>

  <div class="large-12 columns">
    <div class="panel">
      <div class="row">

        <div class="large-4 medium-4 columns">
              <h4>MARKET SHOWROOMS</h4><hr>
               <h5>WORLD MARKET CENTER<br>LAS VEGAS</h5>
               <h5>Building B, Showroom B-36</h5>
               <br>
               <h4>HIGH POINT MARKET<br>NORTH CAROLINA</h4>
               <h5>C &amp; D Building, Showroom 5A-5B</h5>
               <br>
        </div>

          <div class="large-4 medium-4 columns">
                <h4>BROCHURES & TEARSHEETS</h4><hr>
              <ul class="inline-list left">
              <li><a href="http://www.brownstonefurniture.com/tearsheets.html" target="_blank"><img src="img/footer/brochure_tearsheet.min.jpg" alt="Download Tearsheets and Brochures"></a>                                    </li>
              </ul>
        </div>

             <div class="large-4 medium-4 columns">
                 <h4>OPPORTUNITY BUYS</h4><hr>
                <ul class="inline-list left">
        <li><img src="img/footer/footer_opportunitybuys_02.min.jpg"></li>
                </ul>
        </div>

             <div class="large-4 medium-4 columns">
                <h4>CONNECT US</h4><hr>
                <ul class="inline-list left">
                <li><a href="https://www.facebook.com/pages/Brownstone-Furniture/220826074731821" target="_blank"><img src="logos/facebook_color.jpg"></a></li>
                <li><a href="http://www.pinterest.com/brownstonefurn/" target="_blank"><img src="logos/pinterest_color.jpg"></a></li>
                <li><a href="#"><img src="logos/twitter_color.jpg"><em></em></a></li>
                </ul>

      <div class="row collapse">
        <div class="small-10 columns">
          <input type="text" placeholder="Sign Up For Emails">
        </div>
        <div class="small-2 columns">
          <a href="http://www.info@brownstonefurniture.com" class="button postfix">GO</a>
    </div>
</div>
        </div>




        <div class="large-12 columns"><hr>
            <div class="row">

              <div class="large-6 columns">
                  <p>© 2014 Brownstone Furniture. All Rights Reserved.</p>
              </div>

              <div class="large-6 small-12 columns">
                    <ul class="inline-list right">
                    <li><a href=""><b>P:</b> 510.236.0703</a></li>
                    <li><a href=""><b>F:</b> 510.236.0772</a></li>
                    <li><a href=""><b>E:</b> info@brownstonefurniture.com</a></li>
                 </ul>
              </div>

            </div>
        </div>
      </footer>


     </div>
    </div>


  <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>

        <!-- <script src="js/foundation/foundation.js"></script>
    // <script src="js/foundation/foundation.topbar.js"></script> -->  </p>
    <script>
      $(document).foundation();
            </script>
</body>
</html>

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Bridget's post over 3 years

Thank you, Robbert!

You commented on Bridget's post over 3 years

Thank you, Rafi. Still shows the white bottom bar with and without the "background-size: cover;". It is orbit slideshow with 4 slides rotating. I have been stuck on this problem and could really use help here. Below is the Source code to include along with the CSS code shown above. What do I do?

<!doctype html>




Brownstone Furniture | Home

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-53099607-1', 'auto');
ga('send', 'pageview');

<!-- this is where your style overrides go -->
















$(document).foundation();

You commented on Bridget's post about 4 years

Hi Rafi,

The text over code in the Codeine you provided in the link above is helpful. I need help with resolving the JS part in order to make it work. Where do I put the JS code: $(document).foundation(); in? Do I include that code into one of Foundation's JS files or do I create a new JS file? If you can provide the JS file for this would be terrific.

Thank you,

Bridget

You commented on Bridget's post over 4 years

Below is the code for search box, added in a large-8 before the large-4. Which one of forms do I find on Foundation's CSS file to float the form to right?

You commented on Bridget's post over 4 years

Is there a code to include in photo and link in email body, after the mailto: code? (for the email this item link for people to send to their friends/associates)

You commented on Bridget's post over 4 years

Thank you, Rafi! That worked. However, the search box displays on left, I tried the float right in postfix button in the Foundation CSS and still didn't move to right. How can I get it to display on right?

You commented on Rafi Benkual's post over 4 years

Looks GREAT!!! KUDOS to Alex!!!

You commented on Bridget's post almost 5 years

Bimal, thank you for the info above, good one. What I'm trying to get the coding to use as seen in the links below with main window, not slider but main window with thumbnails that clicking a thumbnail the image on main window change into different image without sliding left or right. Make sense? See below.

I'm looking for code to use in my HTML file/layout I'm working on. Below are two link to see the main image with thumbnails, which clicking on a thumbnail the main image box change to a respective image. Does anyone know the code to provide would be helpful?

http://www.williams-sonoma.com/products/harvest-dining-table/?cm_src=AutoRel

http://www.restorationhardware.com/catalog/product/product.jsp?productId=prod690088&categoryId=cat1600008

You commented on Bridget's post almost 5 years

Rafi,

Here is the updated code (please disregard the previous one I posted) with the advanced off canvas code. You'll see what I'm trying to do here. For the Mobile menu I'm trying to establish two menu icons, left menu icon for sidebar menu listing and right menu icon for top nav links with logo in the middle.

Currently it is showing up on both desktop and mobile. How to get it right with showing just on mobile, not on desktop and keep what I already have on desktop's top bar and sidebar.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brownstone Furniture | Bookcases</title>
    <link rel="icon" type="image/ico" href="http://www.brownstonefurniture.com/fav.ico"/>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="//cloud.typography.com/81626/672924/css/fonts.css" />
    <script src="js/vendor/modernizr.js"></script>
</head>
  <body>
  <div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
  <div class="row collapse">
    <div class="small-12 columns">
    <nav class="top-bar" <span class="hide-for-small-only"data-topbar>

      <ul class="title-area">
        <li class="name">
          <h1><a href="index.html"><img alt="Brownstone Furniture" src=
          "logos/brownstonelogo_254px.png"></a></h1>
        </li>

        <li class="toggle-topbar menu-icon"><a href="index.html"><span></span></a></li>
      </ul>


      <section class="top-bar-section">

        <ul class="right">

          <li class="active"><a href="viewbyrooms.html">VIEW BY ROOMS<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="products.html">PRODUCTS<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="dealerlocator.html">DEALER LOCATOR<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="about.html">ABOUT<span class="hidden-for-large-up"> &#10095;</span></a></li>

          <li class="active"><a href="contactus.html">CONTACT US<span class="hidden-for-large-up"> &#10095;</span></a></li>
        </ul>
      </section>
    </span> </nav>
    </div>
  </div>



  <div class="row">
    <div class="small-12 columns"><img src="img/bookcases/product_main_template3a.min.jpg"></div>
</div>   



  <div class="row">
    <div class="large-9 large-push-3 columns">



              <div class="row">
            <div class="large-12 columns">
            <br>
            <br>
           </div>
      </div>

          <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_chestnut.min.jpg" alt="Chelsea Chestnut">

              <div class="panel">
                <p>CHELSEA<br>
                CHESTNUT</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_onyx.min.jpg" alt="Chelsea Onxy">

              <div class="panel">
                <p><br>CHELSEA <br>
                ONYX</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_teak.min.jpg" alt="Chelsea Teak">
  <br>
              <div class="panel">
                <p><br>CHELSEA <br>
                TEAK</small></p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/harrison_bookcase.min.jpg" alt="Harrison">

              <div class="panel">
                <p><br>
                HARRISON</p>
              </div>
            </div>
      </div>

            <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/hudson_bookcase.min.jpg" alt="Hudson">

              <div class="panel">
                <p>HUDSON</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/luxembourg_bookcase.min.jpg" alt="Luxembourg">

              <div class="panel">
                <p>LUXEMBOURG</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/metropolitan_bookcase.min.jpg" alt="Metropolitan">

              <div class="panel">
                <p>METROPOLITAN</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/taylor_bookcase_500px.min.jpg" alt="Taylor">

              <div class="panel">
                <p>TAYLOR</p>
              </div>
            </div>
            </div>

           <div class="row">

              <div class="large-4 small-6 columns">
              <img src="img/bookcases/warren_bookcase_500px.min.jpg" alt="Warren">

              <div class="panel">
                <p>WARREN</p>
              </div>
            </div>

           <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>


      </div>



  <div class="row">
  </div>
    </div>

    <div class="large-3 large-pull-9 columns">
      <br>
      <dl class="accordion" data-accordion="">
        <dd>
          <a href="#panel1">BACHELOR'S CHESTS ›</a>
        </dd>

        <dd>
          <a href="#panel2">BEDS ›</a>
        </dd>

        <dd>
          <a href="#panel3">BENCHES ›</a>
        </dd>

        <dd>
          <a href="#panel4">BOOKCASES ›</a>
        </dd>

        <dd>
          <a href="#panel5">CABINETS ›</a>
        </dd>

        <dd>
          <a href="#panel6">CHESTS ›</a>
        </dd>

              <dd>
          <a href="#panel7">COFFEE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel8">CONSOLE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel9">DESKS ›</a>
        </dd>

              <dd>
          <a href="#panel10">DINING CHAIRS ›</a>
        </dd>

              <dd>
          <a href="#panel11">DRESSERS ›</a>
        </dd>

              <dd>
          <a href="#panel12">END TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel13">KITCHEN ISLANDS ›</a>
        </dd>

              <dd>
          <a href="#panel14">MIRRORS ›</a>
        </dd>

              <dd>
          <a href="#panel15">NIGHTSTANDS ›</a>
        </dd>

              <dd>
          <a href="#panel16">PLASMA CONSOLES ›</a>
        </dd>

              <dd>
          <a href="#panel17">SCREENS ›</a>
        </dd>

              <dd>
          <a href="#panel18">SIDEBOARD/SERVERS ›</a>
        </dd>

              <dd>
          <a href="#panel19">STOOLS ›</a>
        </dd>
      </dl>


      <p>&nbsp;</p>
    </div>
  </div>

  <div class="large-12 columns">
    <div class="panel">
      <div class="row">

        <div class="large-4 medium-4 columns">
              <h4>MARKET SHOWROOMS</h4><hr>
               <h5>WORLD MARKET CENTER<br>LAS VEGAS</h5>
               <h5>Building B, Showroom B-36</h5>
               <br>
               <h4>HIGH POINT MARKET<br>NORTH CAROLINA</h4>
               <h5>C &amp; D Building, Showroom 5A-5B</h5>
               <br>
        </div>

          <div class="large-4 medium-4 columns">
                <h4>BROCHURES & TEARSHEETS</h4><hr>
              <ul class="inline-list left">
              <li><a href="http://www.brownstonefurniture.com/tearsheets.html" target="_blank"><img src="img/footer/brochure_tearsheet.min.jpg" alt="Download Tearsheets and Brochures"></a>                                    </li>
              </ul>
        </div>

             <div class="large-4 medium-4 columns">
                 <h4>OPPORTUNITY BUYS</h4><hr>
                <ul class="inline-list left">
        <li><img src="img/footer/footer_opportunitybuys_02.min.jpg"></li>
                </ul>
        </div>

             <div class="large-4 medium-4 columns">
                <h4>CONNECT US</h4><hr>
                <ul class="inline-list left">
                <li><a href="https://www.facebook.com/pages/Brownstone-Furniture/220826074731821" target="_blank"><img src="logos/facebook_color.jpg"></a></li>
                <li><a href="http://www.pinterest.com/brownstonefurn/" target="_blank"><img src="logos/pinterest_color.jpg"></a></li>
                <li><a href="#"><img src="logos/twitter_color.jpg"><em></em></a></li>
                </ul>

      <div class="row collapse">
        <div class="small-10 columns">
          <input type="text" placeholder="Sign Up For Emails">
        </div>
        <div class="small-2 columns">
          <a href="http://www.info@brownstonefurniture.com" class="button postfix">GO</a>
    </div>
</div>
        </div>




        <div class="large-12 columns"><hr>
            <div class="row">

              <div class="large-6 columns">
                  <p>© 2014 Brownstone Furniture. All Rights Reserved.</p>
              </div>

              <div class="large-6 small-12 columns">
                    <ul class="inline-list right">
                    <li><a href=""><b>P:</b> 510.236.0703</a></li>
                    <li><a href=""><b>F:</b> 510.236.0772</a></li>
                    <li><a href=""><b>E:</b> info@brownstonefurniture.com</a></li>
                 </ul>
              </div>

            </div>
        </div>
      </footer>


     </div>
    </div>


  <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>

        <!-- <script src="js/foundation/foundation.js"></script>
    // <script src="js/foundation/foundation.topbar.js"></script> -->  </p>
    <script>
      $(document).foundation();
            </script>
</body>
</html>

You commented on Bridget's post almost 5 years

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brownstone Furniture | Bookcases</title>
    <link rel="icon" type="image/ico" href="http://www.brownstonefurniture.com/fav.ico"/>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="//cloud.typography.com/81626/672924/css/fonts.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script src="js/foundation/foundation.offcanvas.js"></script>
</head>
  <body>
  <div class="row collapse">
    <div class="small-12 columns">
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <span class="hide-for-small-only"><h1><a href="index.html"><img alt="Brownstone Furniture" src=
          "logos/brownstonelogo_254px.png"></a></h1></span>
        </li></ul>

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

      <section class="top-bar-section">

        <ul class="right">

          <li class="active"><a href="viewbyrooms.html">VIEW BY ROOMS</a></li></span>

          <li class="active"><a href="products.html">PRODUCTS</a></li></span>

          <li class="active"><a href="dealerlocator.html">DEALER LOCATOR</a></li></span>

          <span class="hide-for-small-only"><li class="active"><a href="about.html">ABOUT</a></li></span>

          <span class="hide-for-small-only"><li class="active"><a href="contactus.html">CONTACT US</a></li></span>
        </ul>
      </section>
    </nav>
    </div>
  </div>

  <div class="row">
    <div class="small-12 columns"><img src="img/bookcases/product_main_template3a.min.jpg"></div>
</div>   



  <div class="row">
    <div class="large-9 large-push-3 columns">



              <div class="row">
            <div class="large-12 columns">
            <br>
            <br>
           </div>
      </div>

          <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_chestnut.min.jpg" alt="Chelsea Chestnut">

              <div class="panel">
                <p>CHELSEA<br>
                CHESTNUT</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_onyx.min.jpg" alt="Chelsea Onxy">

              <div class="panel">
                <p><br>CHELSEA <br>
                ONYX</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/chelsea_bookcase_teak.min.jpg" alt="Chelsea Teak">
  <br>
              <div class="panel">
                <p><br>CHELSEA <br>
                TEAK</small></p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/harrison_bookcase.min.jpg" alt="Harrison">

              <div class="panel">
                <p><br>
                HARRISON</p>
              </div>
            </div>
      </div>

            <div class="row">

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/hudson_bookcase.min.jpg" alt="Hudson">

              <div class="panel">
                <p>HUDSON</p>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="img/bookcases/luxembourg_bookcase.min.jpg" alt="Luxembourg">

              <div class="panel">
                <p>LUXEMBOURG</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/metropolitan_bookcase.min.jpg" alt="Metropolitan">

              <div class="panel">
                <p>METROPOLITAN</p>
              </div>
            </div>

                        <div class="large-4 small-6 columns">
              <img src="img/bookcases/taylor_bookcase_500px.min.jpg" alt="Taylor">

              <div class="panel">
                <p>TAYLOR</p>
              </div>
            </div>
            </div>

           <div class="row">

              <div class="large-4 small-6 columns">
              <img src="img/bookcases/warren_bookcase_500px.min.jpg" alt="Warren">

              <div class="panel">
                <p>WARREN</p>
              </div>
            </div>

           <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>

            <div class="large-4 small-6 columns">

            </div>







  <div class="row">
  </div>
    </div>

    <div class="large-3 large-pull-9 columns">
      <br>
      <dl class="accordion" data-accordion="">
        <dd>
          <a href="#panel1">BACHELOR'S CHESTS ›</a>
        </dd>

        <dd>
          <a href="#panel2">BEDS ›</a>
        </dd>

        <dd>
          <a href="#panel3">BENCHES ›</a>
        </dd>

        <dd>
          <a href="#panel4">BOOKCASES ›</a>
        </dd>

        <dd>
          <a href="#panel5">CABINETS ›</a>
        </dd>

        <dd>
          <a href="#panel6">CHESTS ›</a>
        </dd>

              <dd>
          <a href="#panel7">COFFEE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel8">CONSOLE TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel9">DESKS ›</a>
        </dd>

              <dd>
          <a href="#panel10">DINING CHAIRS ›</a>
        </dd>

              <dd>
          <a href="#panel11">DRESSERS ›</a>
        </dd>

              <dd>
          <a href="#panel12">END TABLES ›</a>
        </dd>

              <dd>
          <a href="#panel13">KITCHEN ISLANDS ›</a>
        </dd>

              <dd>
          <a href="#panel14">MIRRORS ›</a>
        </dd>

              <dd>
          <a href="#panel15">NIGHTSTANDS ›</a>
        </dd>

              <dd>
          <a href="#panel16">PLASMA CONSOLES ›</a>
        </dd>

              <dd>
          <a href="#panel17">SCREENS ›</a>
        </dd>

              <dd>
          <a href="#panel18">SIDEBOARD/SERVERS ›</a>
        </dd>

              <dd>
          <a href="#panel19">STOOLS ›</a>
        </dd>
      </dl>


      <p>&nbsp;</p>
    </div>
  </div>

  <div class="large-12 columns">
    <div class="panel">
      <div class="row">

        <div class="large-4 medium-4 columns">
              <h4>MARKET SHOWROOMS</h4><hr>
               <h5>WORLD MARKET CENTER<br>LAS VEGAS</h5>
               <h5>Building B, Showroom B-36</h5>
               <br>
               <h4>HIGH POINT MARKET<br>NORTH CAROLINA</h4>
               <h5>C &amp; D Building, Showroom 5A-5B</h5>
               <br>
        </div>

          <div class="large-4 medium-4 columns">
                <h4>BROCHURES & TEARSHEETS</h4><hr>
              <ul class="inline-list left">
              <li><a href="http://www.brownstonefurniture.com/tearsheets.html" target="_blank"><img src="img/footer/brochure_tearsheet.min.jpg" alt="Download Tearsheets and Brochures"></a>                                    </li>
              </ul>
        </div>

             <div class="large-4 medium-4 columns">
                 <h4>OPPORTUNITY BUYS</h4><hr>
                <ul class="inline-list left">
        <li><img src="img/footer/footer_opportunitybuys_02.min.jpg"></li>
                </ul>
        </div>

             <div class="large-4 medium-4 columns">
                <h4>CONNECT US</h4><hr>
                <ul class="inline-list left">
                <li><a href="https://www.facebook.com/pages/Brownstone-Furniture/220826074731821" target="_blank"><img src="logos/facebook_color.jpg"></a></li>
                <li><a href="http://www.pinterest.com/brownstonefurn/" target="_blank"><img src="logos/pinterest_color.jpg"></a></li>
                <li><a href="#"><img src="logos/twitter_color.jpg"><em></em></a></li>
                </ul>

      <div class="row collapse">
        <div class="small-10 columns">
          <input type="text" placeholder="Sign Up For Emails">
        </div>
        <div class="small-2 columns">
          <a href="http://www.info@brownstonefurniture.com" class="button postfix">GO</a>
    </div>
</div>
        </div>




        <div class="large-12 columns"><hr>
            <div class="row">

              <div class="large-6 columns">
                  <p>© 2014 Brownstone Furniture. All Rights Reserved.</p>
              </div>

              <div class="large-6 small-12 columns">
                    <ul class="inline-list right">
                    <li><a href=""><b>P:</b> 510.236.0703</a></li>
                    <li><a href=""><b>F:</b> 510.236.0772</a></li>
                    <li><a href=""><b>E:</b> info@brownstonefurniture.com</a></li>
                 </ul>
              </div>

            </div>
        </div>
      </footer>


     </div>
    </div>


  <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>

        <!-- <script src="js/foundation/foundation.js"></script>
    // <script src="js/foundation/foundation.topbar.js"></script> -->  </p>
    <script>
      $(document).foundation();
            </script>
</body>
</html>

Posts Followed

Following

  • No Content

Followers

  • No Content