Menu icon Foundation

Coder

My Posts


  • NEW
  • Sticky Nav not staying sticky...

    By sanlorena

    Sticky nav

    My sticky nav is not working... here is the code:   <div class="row" data-sticky-container>     <div class="top-bar" data-sticky>       <div class="top-bar-left">          <ul... (continued)



  • 4
    Replies
  • Sticky nav not working in Foundation6

    By sanlorena

    Sticky nav

    My simple sticky nav used to work in Foundation5, but not in Foundation6: <div class="top-bar">   <div class="top-bar-right">      <ul class="dropdown menu" data-dropdown-menu>         &nb... (continued)

    Last Reply by sanlorena over 3 years ago


  • 6
    Replies
  • Reveal modal not working...

    By sanlorena

    modal reveal

    Hello, I am not sure why this basic reveal modal is not working... what am I missing? <body> <a href="#" data-reveal-id="myModal">Click Me For A Modal</a> <div id="myModal" class="reveal-modal" data-reveal aria-labelledb... (continued)

    Last Reply by Dusin almost 2 years ago



  • 1
    Reply
  • Full width image

    By sanlorena

    From a previous post I found out I should change in the CSS = row {...max-width: 100%;} This worked, but how can I get rid of the space on each side of the image? Thanks!

    Last Reply by FoundationDeck almost 4 years ago


  • 6
    Replies
  • empty columns

    By sanlorena

    columnsgrid

    How can I create empty spaces? You can see in the html, I created 4 columns, the 2nd column was the one I wanted empty, but the 3rd column took its position. Why is this and how can I have empty spaces?

    Last Reply by sanlorena almost 4 years ago


My Comments

sanlorena commented on sanlorena's post about 3 years

I was using Foundation 5 when I created this site, but I am not sure how to make it all work now that I see a lot of more documentation for 6, so I will have to leave it as is.
Thank you for your help! 

sanlorena commented on sanlorena's post about 3 years

Thank you for pointing this out... I had another website that I built with Bootstrap, but I forgot this was done with Foundation and copied the bootstrap nav to this one... In any case, I updated the nav to Foundation, but now it is off to the left and still not sticky...
Here is the code:
    <div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="#about" class="smoothScroll">about</a></li>
          <li><a href="#portfolio" class="smoothScroll">portfolio</a></li>
          <li><a href="#contact" class="smoothScroll">contact</a></li>
        </ul>
    </nav> 
  </div>
 
Here is the JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script>
 
<script type="text/javascript" src="js/main.js"></script>
 
 
<script src="js/vendor/foundation.min.js"></script>
 
<script src="js/vendor/what-input.js"></script>
 
   <script>
    $(document).foundation();
  </script>

sanlorena commented on sanlorena's post over 3 years

Hi Rafi,
I added the data-v-offset, but it is still showing at the very top, what else could be the issue?

sanlorena commented on sanlorena's post over 3 years

it is all working now, thank you for taking the time to help me out!

sanlorena commented on sanlorena's post over 3 years

Hi Danielle,
Thank you for your help, it is working now but it still has a few glitches...
These 2 images are the desktop version, so the sticky nav does not stay at the top: 

 

 
Here is the CSS for desktop:

 
This is the mobile version, not sure why there is a gap on the edges, the links move towards the left and it is not sticky anymore:

 
Here is the CSS for mobile:

Thank you!

sanlorena commented on sanlorena's post over 3 years

Thank you Brian - I cleaned up the code and downloaded Foundation6 but I am still having the same problem... this is the updated version:
<!DOCTYPE HTML>
<html>
 <head>
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description"/>
    <meta name="author">
    <!-- Style Sheets -->
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <!-- HTML% shiv -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script>
        <![endif]-->
  </head>
 
<body>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
 
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.min.js"></script> 
<script src="js/vendor/fastclick.js"></script>
<script src="js/vendor/modernizr.js"></script>  
<script>
    $(document).foundation();
</script>
 
</body>
</html>
And here are the files:
 

sanlorena commented on sanlorena's post almost 4 years

perfect, thank you Rafi!

sanlorena commented on sanlorena's post almost 4 years

I made an example on using pull and push to create empty cols, but it seems push doesn't work because you can see the col under it that was not pulled. So should we only use these classes - if both are used?

 <div class="row">
    <div class="large-6 large-push-6 columns">
      <p class="outline level">1st col pushed</p>
    </div>
    <div class="large-6 columns">
      <p class="outline">col</p>
    </div>
  </div>

  <div class="row">
    <div class="large-4 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-4 large-push-4 columns">
      <p class="outline level">2nd col pushed</p>
    </div>
    <div class="large-4 columns">
     <p class="outline">col</p>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 large-pull-3 columns end">
      <p class="outline level">4th col pulled</p>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 large-pull-6 columns">
      <p class="outline level">4th col pulled</p>
    </div>
    <div class="large-3 large-pull-6 columns end">
      <p class="outline level">5th col pulled</p>
    </div>
  </div>

sanlorena commented on allan ramos's post almost 4 years

I want my top menu to display in the same way. I used this code and added in the CSS:
.sticky {position: fixed} to make it stay in the same position, but this made the menu go off the grid... what am I missing?

sanlorena commented on sanlorena's post almost 4 years

I did see that post, but I don't know Ajax just yet. So I can go with the first solution or using push. Now I remember push not being useful in another example, I'll post it here if I have issues again.
Thank you!

Posts Followed


Following

    No Content

Followers

My Posts








My Comments

You commented on sanlorena's post about 3 years

I was using Foundation 5 when I created this site, but I am not sure how to make it all work now that I see a lot of more documentation for 6, so I will have to leave it as is.
Thank you for your help! 

You commented on sanlorena's post about 3 years

Thank you for pointing this out... I had another website that I built with Bootstrap, but I forgot this was done with Foundation and copied the bootstrap nav to this one... In any case, I updated the nav to Foundation, but now it is off to the left and still not sticky...
Here is the code:
    <div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="#about" class="smoothScroll">about</a></li>
          <li><a href="#portfolio" class="smoothScroll">portfolio</a></li>
          <li><a href="#contact" class="smoothScroll">contact</a></li>
        </ul>
    </nav> 
  </div>
 
Here is the JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script>
 
<script type="text/javascript" src="js/main.js"></script>
 
 
<script src="js/vendor/foundation.min.js"></script>
 
<script src="js/vendor/what-input.js"></script>
 
   <script>
    $(document).foundation();
  </script>

You commented on sanlorena's post over 3 years

Hi Rafi,
I added the data-v-offset, but it is still showing at the very top, what else could be the issue?

You commented on sanlorena's post over 3 years

it is all working now, thank you for taking the time to help me out!

You commented on sanlorena's post over 3 years

Hi Danielle,
Thank you for your help, it is working now but it still has a few glitches...
These 2 images are the desktop version, so the sticky nav does not stay at the top: 

 

 
Here is the CSS for desktop:

 
This is the mobile version, not sure why there is a gap on the edges, the links move towards the left and it is not sticky anymore:

 
Here is the CSS for mobile:

Thank you!

You commented on sanlorena's post over 3 years

Thank you Brian - I cleaned up the code and downloaded Foundation6 but I am still having the same problem... this is the updated version:
<!DOCTYPE HTML>
<html>
 <head>
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description"/>
    <meta name="author">
    <!-- Style Sheets -->
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <!-- HTML% shiv -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script>
        <![endif]-->
  </head>
 
<body>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
 
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.min.js"></script> 
<script src="js/vendor/fastclick.js"></script>
<script src="js/vendor/modernizr.js"></script>  
<script>
    $(document).foundation();
</script>
 
</body>
</html>
And here are the files:
 

You commented on sanlorena's post almost 4 years

perfect, thank you Rafi!

You commented on sanlorena's post almost 4 years

I made an example on using pull and push to create empty cols, but it seems push doesn't work because you can see the col under it that was not pulled. So should we only use these classes - if both are used?

 <div class="row">
    <div class="large-6 large-push-6 columns">
      <p class="outline level">1st col pushed</p>
    </div>
    <div class="large-6 columns">
      <p class="outline">col</p>
    </div>
  </div>

  <div class="row">
    <div class="large-4 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-4 large-push-4 columns">
      <p class="outline level">2nd col pushed</p>
    </div>
    <div class="large-4 columns">
     <p class="outline">col</p>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 large-pull-3 columns end">
      <p class="outline level">4th col pulled</p>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 columns">
      <p class="outline">col</p>
    </div>
    <div class="large-3 large-pull-6 columns">
      <p class="outline level">4th col pulled</p>
    </div>
    <div class="large-3 large-pull-6 columns end">
      <p class="outline level">5th col pulled</p>
    </div>
  </div>

You commented on allan ramos's post almost 4 years

I want my top menu to display in the same way. I used this code and added in the CSS:
.sticky {position: fixed} to make it stay in the same position, but this made the menu go off the grid... what am I missing?

You commented on sanlorena's post almost 4 years

I did see that post, but I don't know Ajax just yet. So I can go with the first solution or using push. Now I remember push not being useful in another example, I'll post it here if I have issues again.
Thank you!

Posts Followed


Following

  • No Content

Followers

  • No Content