Menu icon Foundation

Designer | Norwich, England

My Posts





  • NEW
  • F6 Tabs with Handlebars json

    By Will Moody

    F6tabsHandlebarsJSON

    Hi All I would like to create a tabs section on a contact page, but to input the various contact information from an external json file using handlebars, the code I have so far is as below. <div class="tabs-content" data-tabs-content="contac... (continued)



  • NEW
  • Sticky Nav- display: none problem

    By Will Moody

    F6sitesstickydisplay

    Hi all  Iv'e created a sticky navigation, in which i would like to have a logo above the nav, which then appears in the nav when scrolled (https://codepen.io/anon/pen/zqjmGv). The issue I have is I am using display:none and then display:block along... (continued)





My Comments

Will Moody commented on JF Pintal's post about 2 years

Hi JF
 
Which version of Foundation are you using?
And do you have any code you could share?
 
Will

Will Moody commented on Designer's post about 2 years

Hi Designer
 
This works, Iv'e added align-center to the grid-x and changed large-auto to small-12.
<div class="grid-container">
<div class="grid-x align-center">
<div class="small-12 cell"></div>
<div class="cell large-8 medium-8 small-12">
<h1>title</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
</div>
</div>
<div class="large-auto cell">
<h2>title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias obcaecati autem est, totam expedita reprehenderit nam consectetur quo aut ipsam dolorum illum cupiditate quia doloribus ad ab pariatur, ex excepturi.</p>
</div>
</div>
 
Will

Will Moody commented on toshfox's post about 2 years

Hi Toshfox
 
Try adding <script src="js/foundation.js"></script> to the botttom of your page and have you tried adding
<script> $(document).foundation(); </script>
to the bottom of your page, as per the instructions here http://foundation.zurb.com/sites/docs/installation.html
There is a codepen here https://codepen.io/FatBuddha/pen/5885bc88a105066d68e8e3242225a95d that shows how it works
 
Will

Will Moody commented on abdessamad idrissi's post about 2 years

Hi
This one seems to be maintained http://foundation-datepicker.peterbeno.com/example.html#basic-example and has good examples and docs.
 
Will

Will Moody commented on Pam Bifaro's post about 2 years

Hello Pam
 
Looks like that's feasible, this feed may be helpful http://foundation.zurb.com/forum/posts/37020-f6---custom-breakpoint-based-on-size-and-orientation.
Would be interested to know how you get on.
 
Will

Will Moody commented on Pam Bifaro's post about 2 years

Hi Pam
Sorry, I misread your original question.
The only way I can think of doing hide for medium down is to use the show-for-large-only, I have put together a codepen here  https://codepen.io/FatBuddha/pen/dRZPGG/ that works as you want I think.
When I looked at your website it appears the button and text is hidden on the smaller range of medium.
I know of no way to smoothly transition the hide/show
 
Will

Will Moody commented on Pam Bifaro's post about 2 years

Hello Pam
 
You could use the class="show-for-small-only" on the components you would like to hide,
information is here http://foundation.zurb.com/sites/docs/visibility.html
 
Will

Will Moody commented on don's post about 2 years

Hi Don
Yep, that's how it works, all your js, css and images are served from the assets directory and ./ takes you back to the root.
Glad you are sorted.
 
Will

Will Moody commented on don's post about 2 years

Hi Don
Is the image you intend using a good size, say 2440px wide, the background-size:cover should expand it but I've found it's better to use a large image.
I notice you have background-image: url('Images/Menubac.jpg'); have you tried background-image: url('../assets/Images/Menubac.jpg');
Will

Will Moody commented on don's post about 2 years

Hi Don
It looks like your css for the background image is a bit out, try this :-
 
.top-bar {
  padding: 1rem;
  background-image: url('Images/Menubac.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
}
 
There is a working codepen here - https://codepen.io/FatBuddha/pen/f47922d361ae85fe271386e1a62517f9
 
Will

Posts Followed


  • 9
    Replies
  • Basic, centered DIV using XY?

    By Designer

    centeredcenterxy

    I don't understand&nbsp;what I'm missing. I went through the XY doc but I can't for the life of me get a simple div to be centered--it's always offset on one side or another.&nbsp;I ditched the offset method because it wasn't working, but the auto cell do... (continued)

    Last Reply by Adam009 almost 2 years ago


  • 2
    Replies
  • Foundation 6 - JS for the Dropdown Menu

    By toshfox

    dropdown menu

    hello guys...I am learning&nbsp;to creation websites with foundation 6, and it seems I am not smart enough to understand why my dropdown menu doesn't work.Maybe coz english is not my native language, but this is what I understand : In Foundation 6, the d... (continued)

    Last Reply by toshfox about 2 years ago



  • 6
    Replies
  • Hide for medium down

    By Pam Bifaro

    <div>

    Is there a way to hide for medium down? I am trying to hide text and a button on orbit slides when the screen gets smaller then a tablet. On the small screens I only want to show the logo on the background slide. Or is there another way to make this trans... (continued)

    Last Reply by Pam Bifaro about 2 years ago


  • 7
    Replies
  • Background image not appearing

    By don

    csstop barmenubackground Image

    Hi, I am trying to add a background image to a top bar menu. So far I've tried adding via the top-bar class itself, and by attaching a class 'backa' to the ul. I've tried setting height, setting 100% width, adding !important; to the overriding css and st... (continued)

    Last Reply by don about 2 years ago


  • 2
    Replies
  • error loading page with my menu

    By nicola parkes

    javascript

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hi i was wondering if anyone can see a problem with my code ive pin pointed it down to the javascript as to why my website wont open any of the pages. do i have all the scripts in the correct order? when i try to op... (continued)

    Last Reply by jay grey over 2 years ago


  • 4
    Replies
  • Help with foundation 6 topbar

    By Peter Crymble

    topbar

    Hi there &nbsp; I'm working on a new website for myself - but cannot get the topbar menu to work. Not sure if the JS isn't firing or whether I've done something wrong. Would really appreciate any help!! http://lab2.peterthomasonline.com/index.aspx &nb... (continued)

    Last Reply by Peter Crymble over 2 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on JF Pintal's post about 2 years

Hi JF
 
Which version of Foundation are you using?
And do you have any code you could share?
 
Will

You commented on Designer's post about 2 years

Hi Designer
 
This works, Iv'e added align-center to the grid-x and changed large-auto to small-12.
<div class="grid-container">
<div class="grid-x align-center">
<div class="small-12 cell"></div>
<div class="cell large-8 medium-8 small-12">
<h1>title</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
</div>
</div>
<div class="large-auto cell">
<h2>title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias obcaecati autem est, totam expedita reprehenderit nam consectetur quo aut ipsam dolorum illum cupiditate quia doloribus ad ab pariatur, ex excepturi.</p>
</div>
</div>
 
Will

You commented on toshfox's post about 2 years

Hi Toshfox
 
Try adding <script src="js/foundation.js"></script> to the botttom of your page and have you tried adding
<script> $(document).foundation(); </script>
to the bottom of your page, as per the instructions here http://foundation.zurb.com/sites/docs/installation.html
There is a codepen here https://codepen.io/FatBuddha/pen/5885bc88a105066d68e8e3242225a95d that shows how it works
 
Will

You commented on abdessamad idrissi's post about 2 years

Hi
This one seems to be maintained http://foundation-datepicker.peterbeno.com/example.html#basic-example and has good examples and docs.
 
Will

You commented on Pam Bifaro's post about 2 years

Hello Pam
 
Looks like that's feasible, this feed may be helpful http://foundation.zurb.com/forum/posts/37020-f6---custom-breakpoint-based-on-size-and-orientation.
Would be interested to know how you get on.
 
Will

You commented on Pam Bifaro's post about 2 years

Hi Pam
Sorry, I misread your original question.
The only way I can think of doing hide for medium down is to use the show-for-large-only, I have put together a codepen here  https://codepen.io/FatBuddha/pen/dRZPGG/ that works as you want I think.
When I looked at your website it appears the button and text is hidden on the smaller range of medium.
I know of no way to smoothly transition the hide/show
 
Will

You commented on Pam Bifaro's post about 2 years

Hello Pam
 
You could use the class="show-for-small-only" on the components you would like to hide,
information is here http://foundation.zurb.com/sites/docs/visibility.html
 
Will

You commented on don's post about 2 years

Hi Don
Yep, that's how it works, all your js, css and images are served from the assets directory and ./ takes you back to the root.
Glad you are sorted.
 
Will

You commented on don's post about 2 years

Hi Don
Is the image you intend using a good size, say 2440px wide, the background-size:cover should expand it but I've found it's better to use a large image.
I notice you have background-image: url('Images/Menubac.jpg'); have you tried background-image: url('../assets/Images/Menubac.jpg');
Will

You commented on don's post about 2 years

Hi Don
It looks like your css for the background image is a bit out, try this :-
 
.top-bar {
  padding: 1rem;
  background-image: url('Images/Menubac.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
}
 
There is a working codepen here - https://codepen.io/FatBuddha/pen/f47922d361ae85fe271386e1a62517f9
 
Will

Posts Followed








Following

  • No Content

Followers

  • No Content