Menu icon Foundation
Stack and shrink?

UPDATE - 1/3/2018 - read my last message on this thread for the update. Found my error.

 

I have a super simple page layout with an 8-column/4-column split, very basic layout.

top-bar nav

row

small-8

small-4

close row

I am using the out-of-the-box Foundation 5.3 with CSS that only changes colors and nothing in regard to sizing. On an iPhone this page is only really readable if I turn the phone to landscape. In portrait, only the left portion of the nav shows rather than defaulting to the menu/icon and the two columns shrink but spread off the visible screen. 

I work in straight css (long story - just know that I cannot move to scss/sass for reasons above my pay-grade and Foundation 6 not an option at this time either). 

I know that I should not code JUST for a single device, but really I think this is more about "small" not being responsive. 

I don't use any push/pull logic - just very vanilla as shown above. 

How do I begin the process of tweaking the top-level nav so it is responsive on a small screen, and how do I make my columns stack rather than shrink on a smaller screen? If I get the responsive right - will they stack automatically? Our site subsists within an iFrame environment over which I have no control - but I don't actually think that is keeping this from working. I think there is some piece of understanding that I'm missing. 

I did try tweaking the small, medium, large - but honestly that just made a muddy mess for me so I've gone back to the way the Foundation.css was originally created to start fresh. 

basic gridstackingsmalliphone

UPDATE - 1/3/2018 - read my last message on this thread for the update. Found my error.

 

I have a super simple page layout with an 8-column/4-column split, very basic layout.

top-bar nav

row

small-8

small-4

close row

I am using the out-of-the-box Foundation 5.3 with CSS that only changes colors and nothing in regard to sizing. On an iPhone this page is only really readable if I turn the phone to landscape. In portrait, only the left portion of the nav shows rather than defaulting to the menu/icon and the two columns shrink but spread off the visible screen. 

I work in straight css (long story - just know that I cannot move to scss/sass for reasons above my pay-grade and Foundation 6 not an option at this time either). 

I know that I should not code JUST for a single device, but really I think this is more about "small" not being responsive. 

I don't use any push/pull logic - just very vanilla as shown above. 

How do I begin the process of tweaking the top-level nav so it is responsive on a small screen, and how do I make my columns stack rather than shrink on a smaller screen? If I get the responsive right - will they stack automatically? Our site subsists within an iFrame environment over which I have no control - but I don't actually think that is keeping this from working. I think there is some piece of understanding that I'm missing. 

I did try tweaking the small, medium, large - but honestly that just made a muddy mess for me so I've gone back to the way the Foundation.css was originally created to start fresh. 

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

Rafi Benkual over 1 year ago

Can you share the code you are working with so we can help more?

Or better, Have a live example?

Here is a blank codepen if that's easier
https://codepen.io/rafibomb/pen/qparjP

Sherry Bradford over 1 year ago

The top-nav does not show a hamburger icon on an iPhone (though it does when the code is viewed in Google emulation). But the stacking issue is the most pressing at the moment. Since our content is verbiage heavy, having a clear view of a single column of content is better than small side-by-side content. Thank you! Appreciate any hints/pointers/ideas to move me forward on getting these to stack.

 

<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>PAGE TITLE</title>
    <link rel="stylesheet" href="/contentFolder/styles/css/foundation.min.css"/>
    <link rel="stylesheet" href="/contentFolder/styles/css/app.css"/>
    <link rel="stylesheet" href="/contentFolder/styles/css/video-player.css" />
    <script src="/contentFolder/styles/js/vendor/modernizr.js"></script>

<!--[if lte IE 8]>
    <script src="/contentFolder/styles/js/shivs/respond.min.js"></script>
	<script src="/contentFolder/styles/js/shivs/html5shiv.js"></script>
    <script src="/contentFolder/styles/js/shivs/nwmatcher-1.2.5-min.js"></script>
	<script src="/contentFolder/styles/js/shivs/selectivizr-1.0.3b.js"></script>
	<![endif]-->
</head>
<body>
<!-- BEGIN THE TOP NAV SECTION CODE -->
<div class="fixed">
	<nav class="top-bar" data-topbar role="navigation">
  	<ul class="title-area">
    	<li class="name">
      		<h1><a onClick="scLinkTrack(this)" href="/contentTopicMain.html">TITLE 1</a></h1>
    	</li>
     	<!-- Remove the class "menu-icon" to get rid of menu icon. Take out word "Menu" to just have icon alone -->
    	<!-- <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> -->
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  	</ul>

<section class="top-bar-section">
    <!-- Right Nav Section -->
    	<ul class="right">
      		<li><a onClick="scLinkTrack(this)" href="/contentFolder/home.html">Home</a></li>
      		<li><a onClick="scLinkTrack(this)" href="/contentFolder/ resources.html">Resources</a></li>
            <li class="has-dropdown">
        		<a href="#">Some Content</a>
        		<ul class="dropdown">
          			<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic.html">FA TITLE</a></li>
          			<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic2.html">MA TITLE</a></li>
        		</ul>
      		</li>
      		<li class="has-dropdown">
        		<a href="#">Work Groups</a>
        		<ul class="dropdown">
          			<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic3.html">FMT</a></li>
          			<li><a onClick="scLinkTrack(this)" href="/contentFolder /someContentTopic4.html">MS</a></li>
          			<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic4..html">M RE</a></li>

        		</ul>
      		</li>
    	</ul>

    	<!-- Left Nav Section 
    	<ul class="left">
      		<li><a href="#">Left Nav Button</a></li>
    	</ul> -->
	</section>
	</nav>
</div> <!-- end fixed div class -->
<!-- END THE TOP NAV SECTION CODE-->

<div class="row">
    <p><img src="/contentFolder/tabImages/maxFullSideview.png" alt="Banner - Seats"></p>
</div>

<div class="row">
		<div class="large-8 columns updateStyle">
           			<h4>Stay Informed</h4>
           			<hr>
                    <h6>December 4, 2017 &ndash; Contract Q&amp;A Available</h6>
                    <p>In the "Resources" section of this page…</p>
                    
                    <h6>November 1, 2017 &ndash; Communication… </h6>
                    <p>From time to time…</p>
      	</div> <!-- end 8 -->
		<div class="large-4 columns">
                	<h4>Video</h4>
              		<hr>
            		<div class="video-player">
           				<div class="video-tree">
					  		<video id="myVideo1" poster="/contentFolder/VideoSplash.png" controls>
            				<source src=" 20171014TFPExplainer.mp4" type="video/mp4"> 
           					</video>
       			  		</div> <!-- end video-tree id -->
       		  		</div><!-- end video-player id --> 
            		<p>&nbsp;</p>
        			
                    <h4>Resources</h4>
           			<hr>
   					<ul class="arrow">
	   					<li><a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/aPage.pdf')">A Page Of Content </a></li>
                        <li><a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/anotherPage.pdf')">Q&amp;A</a></li>
                        </ul>
                    <a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/someContentPage.pdf');"><img style="padding-bottom:10px" src="/contentFolder/someImage.png"></a>
       	</div> <!-- end 4 columns -->
</div> <!-- end row -->
<script src="/contentFolder/styles/js/vendor/jquery.js"></script>
<script src="/contentFolder/styles/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    <script>
		var vid=document.getElementById('myVideo1');
		vid.addEventListener("ended", resetVideo, false);

		function resetVideo() {
    	// resets the video element by resetting the source
    	this.load()
		}	
	</script>
    <script src="/contentFolder/styles/js/rem.min.js"></script>
   </body>
</html>


		function resetVideo() {
    	// resets the video element by resetting the source
    	this.load()
		}	
	</script>
    <script src="/contentFolder/styles/js/rem.min.js"></script>
   </body>
</html>

Sherry Bradford over 1 year ago

Figured out what I was doing wrong. I wasn't declaring anything for the small. By adding small-12 to the sections I needed to stack, everything behaves just fine. I do find that my layout does not work vertically on an iPhone 5. It works fine if they turn the phone horizontally. My guess is that I could fix that by setting a smaller size for "small". But at this time, I'm going to focus on the rest of the coding and top-nav issues and will revisit the small sizing later. We are an intranet and the most common devices are ipad Mini, ipad, and laptops/desk tops. Very few people actually use their phone for the intranet site at this time.

I figured this out by going through posts, Stack Overview questions, and reviewing Foundation basic principles again. I am so grateful for the community and the documentation provided for Foundation. Lifesaver!