Menu icon Foundation

Designer

Just a simple wordpress designer. I love WP, Foundation and other free stuff on internet. Best things are free :)

My Posts


My Comments

Bican Marian Valeriu commented on Eli's post over 1 year

You can modify templates by adding /woocommerce/template-files.php in your theme and override any woocommerce that you want. Just coppy templates folder from woocommerce and add it in your theme. This is how i did it for my custom theme. Another posibility to add columns for your products li is to add a filter to post class only for woocommerce pages. (make a function to check for woocommerce page). If you want I can show an example on my custom theme: framework dot wecodeart dot com - I think you want to achieve that.

Bican Marian Valeriu commented on Bican Marian Valeriu's post about 2 years

Foundation Powered Wordpress Theme here it is guys. Check it and tell me your opinion about it.

Bican Marian Valeriu commented on Bican Marian Valeriu's post about 2 years

Foundation Powered Wordpress Theme here it is guys. Check it and tell me your opinion about it.

Bican Marian Valeriu commented on Diego Ramirez's post over 2 years

I dont recommend to have both header and footer fixed because you will not have space for rest of the content....
However you can make a fixed footer ...give it a negative z-index to position it before other website elements then add a margin based on your footer height to your body...so you will have a nice overlapping efect like here:
Example: wecodeart dot com
Javascript code to do that is:
// Fixed Footer Plugin
var fooHeight = $("body > footer.fixed").outerHeight(true);
$("body").css("margin-bottom", fooHeight+"px");
First step is get your footer height, with margin and padding then apply that height to your body as a margin. 
And this is the css for footer:
.footer.fixed {
position: fixed;
bottom: 0;
width: 100%;
z-index: -99;
}
Hope this helps you.

Bican Marian Valeriu commented on Diego Ramirez's post over 2 years

Make 2 same menus, use .show-for-small-only class for one of them...for the other one .hide-for-small-only

Bican Marian Valeriu commented on Diego Ramirez's post over 2 years

You can use .show-for-small-only or .hide-for-small-only class for your menu's. But it will be sticky unless u make sticky only the menu for mobile. I dont use Foundation sticky on wecodeart blog but i use it only for CSS. Check live example there and ask if you dont understand something.

Bican Marian Valeriu commented on Diego Ramirez's post over 2 years

You can use class .hide-for-small-only or .show-for-medium-only.
I used to have a sticky example like you want here: sticky js.
But i dont use foundation's sticky plugin. I've made my own sticky plugin.

Bican Marian Valeriu commented on william's post over 2 years

 Here is a little code example that may work for you until you/them fix topbar
A live example of sticky topbar based on Foundation grid you can find here: foundation topbar.
<script type="text/javascript">
$(window).scroll(function() {

var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("header.sticky").addClass("is-stuck");
} else {
$("header.sticky").removeClass("is-stuck");
}
});
</script>
With this you add is-stuck after user scroll on your site. Hope it works for you !

Bican Marian Valeriu commented on Diego Ramirez's post over 2 years

I think they fixed this in 6.1.1

Bican Marian Valeriu commented on Diego Ramirez's post almost 3 years

I've noticed that but i did not found any fix for that. I guess is because of the foundation. With foundation 5 i did not had this kind of issues. Hope they will fix it soon. Also the menu from topbar is not working properly on small screens. For example, on large screen you can click on first tier link (let's say My Acount or About link) but on small screens you can't click it, if you click it will point you to the sub-items menu. Anyway i hope that example is good for you people and lets wait for fix/improvements !

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Eli's post over 1 year

You can modify templates by adding /woocommerce/template-files.php in your theme and override any woocommerce that you want. Just coppy templates folder from woocommerce and add it in your theme. This is how i did it for my custom theme. Another posibility to add columns for your products li is to add a filter to post class only for woocommerce pages. (make a function to check for woocommerce page). If you want I can show an example on my custom theme: framework dot wecodeart dot com - I think you want to achieve that.

You commented on Bican Marian Valeriu's post about 2 years

Foundation Powered Wordpress Theme here it is guys. Check it and tell me your opinion about it.

You commented on Bican Marian Valeriu's post about 2 years

Foundation Powered Wordpress Theme here it is guys. Check it and tell me your opinion about it.

You commented on Diego Ramirez's post over 2 years

I dont recommend to have both header and footer fixed because you will not have space for rest of the content....
However you can make a fixed footer ...give it a negative z-index to position it before other website elements then add a margin based on your footer height to your body...so you will have a nice overlapping efect like here:
Example: wecodeart dot com
Javascript code to do that is:
// Fixed Footer Plugin
var fooHeight = $("body > footer.fixed").outerHeight(true);
$("body").css("margin-bottom", fooHeight+"px");
First step is get your footer height, with margin and padding then apply that height to your body as a margin. 
And this is the css for footer:
.footer.fixed {
position: fixed;
bottom: 0;
width: 100%;
z-index: -99;
}
Hope this helps you.

You commented on Diego Ramirez's post over 2 years

Make 2 same menus, use .show-for-small-only class for one of them...for the other one .hide-for-small-only

You commented on Diego Ramirez's post over 2 years

You can use .show-for-small-only or .hide-for-small-only class for your menu's. But it will be sticky unless u make sticky only the menu for mobile. I dont use Foundation sticky on wecodeart blog but i use it only for CSS. Check live example there and ask if you dont understand something.

You commented on Diego Ramirez's post over 2 years

You can use class .hide-for-small-only or .show-for-medium-only.
I used to have a sticky example like you want here: sticky js.
But i dont use foundation's sticky plugin. I've made my own sticky plugin.

You commented on william's post over 2 years

 Here is a little code example that may work for you until you/them fix topbar
A live example of sticky topbar based on Foundation grid you can find here: foundation topbar.
<script type="text/javascript">
$(window).scroll(function() {

var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("header.sticky").addClass("is-stuck");
} else {
$("header.sticky").removeClass("is-stuck");
}
});
</script>
With this you add is-stuck after user scroll on your site. Hope it works for you !

You commented on Diego Ramirez's post over 2 years

I think they fixed this in 6.1.1

You commented on Diego Ramirez's post almost 3 years

I've noticed that but i did not found any fix for that. I guess is because of the foundation. With foundation 5 i did not had this kind of issues. Hope they will fix it soon. Also the menu from topbar is not working properly on small screens. For example, on large screen you can click on first tier link (let's say My Acount or About link) but on small screens you can't click it, if you click it will point you to the sub-items menu. Anyway i hope that example is good for you people and lets wait for fix/improvements !

Posts Followed

Following

  • No Content

Followers