214 comments

Hi guys, like this theme very much, looks great and have everything for easy customization.
I have a little problem though, which I suppose should be fixed easily, just can't understand what I've missed.
After copying all css and js scripts it looks like expected but sometimes have problems after page load. Considering Portfolio->Grod-> 2 columns - No Spacing, when page is loaded, images heights are calculated wrong that results in like 'closed accordion' and bottom images are shown above higher images, after I resize browser windows it recalculates everything and it looks like expected. It happens time to time, sometimes eveything is good, sometimes some images look like excepted and some are not.
Seems like onload even for some images doesn't work and heights are calculated wrong. Same problem I have for Blog->Grid pages. In examples everything works fine,
Any advice?
Found solution. It's a known isotope plugin issue, caused by unloaded images. More info on how to fix this here: http://isotope.metafizzy.co/appendix.html#imagesloaded
FIRST STEP - download to "imagesloaded.pkgd.min.js" ("http://ivang-design.com/metis/js/imagesloaded.pkgd.min.js")

SECOND STEP - load to html page in imagesloaded.pkgd.min.js (exa. html code : "<script src="js/plugin/imagesloaded.pkgd.min.js" type="text/javascript"></script>")

THIRD STEP - "theme.js" file open and find this code.---
---------------------------------------------------------------
var $container2 = $('.container-grid').isotope({
itemSelector: '.nf-item',
layoutMode: 'fitRows'
});
----------------------------------------------------------------

Top code Replace to This code.
--------------------------------------------------------------
var $container2 = $('.container-grid');
$container2.imagesLoaded(function () {
$container2.isotope({
itemSelector: '.nf-item',
layoutMode: 'fitRows'
});
});
--------------------------------------------------------------

imagesloaded solution is Will be.
dimon PURCHASED
Hello, i like your theme too, but i have one question. When i try to open the INTRO YOUTUBE-page with my Android-phone (Chrome), no videos are played. The Youtube-code is not in the page. How can I fix this? Thank you for you feedback :)
Just mailed you and waiting for your reply.
I can't seem to get google maps to work on any of the contact pages. This is the error I get.
JAVA SCRIPT ALERT
This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError.

Any suggestions?
Dean
Hello! Dean

please map used Html pages in find this code :
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>

Replace To This code :
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

map alert issue solved and map are working.

--- OR ------------------------------------------------------------------------------------------------
Download Now Latest Version (v1.1) :
https://wrapbootstrap.com/support/download-resender

----
! Any help & questions? i am free free
jonl PURCHASED
Hello,

Have you tried the home pages on an iPhone or iPad? Many of them don't work. For example the "Default" page has stretched images in the main intro section, and "Intro Static Bg" page shows the image zoomed in far too much (on an iPad) or not at all (on an iPhone). About the only one that displays the landing image correctly is "Intro Canvas Pattern". Do you plan to QC and fix this? Thank you for any help.

p.s. - This is in Safari in iOS 8.3.
Don't worry,
Observe waiting for the answer of your solution to my mailed.
open "style.css" file, and find class".fullscreen-carousel .slides li img" line number. 3471, and replace to this code.

.fullscreen-carousel .slides li img {
height: 100%;
max-width: none;
width: auto;
}

---------------------------
Any Help & Questions? free free.
via email : support@nileforest.com
Hi,

we are facing some issues with the theme refresh. I just installed the theme by copying it on our servers .

When loading for the first time, most of the time nothing appears and the loading image is just loading again and again. Then, I do a simple refresh and it works.
I do some ctrl+F5 one, two times sometime 5 times and again it is loading without ending.
I do just F5 and it flushes the display.

It is very very weird. We tried to setup the theme on two different Apache servers and Tomcat. We tried to lauch it from Chrome and Firefox and the problem is the same.

I then tried to download again the theme and did some simple copy paste on the servers withtout modifying anything and the problem still occurs.

What are doing wrong ?

Thank you,

Fabrice
I keep it in the spotlight

mazel template is simple HTML, CSS, JQUERY and JS plugins included.

Mazel template you the "Open with local Pc", "Host in server" and "web server" Do not open or even look perfect.
So I do not know, no problem.

But your issue is load problem

So the first thing you have to keep in focus.
1.) Mazel template perfect copy of the server you put it on?
2.) Javascript perfect load is going to be?
3.) There has been no change in the theme.js file, such as Add or remove Function?
4.) javascript plugins are exactly the load?

You have to step into the spotlight Option exactly is the problem.

If all things are equal you the "Web Server" you can check on the host.

-------------
Help & Questions? feel free.
Via email : support@nileforest.com
Hello, Well done on the template its fantastic. I just have a quick question regarding the isotope grid in the work section when I add my images they are not all the same size so some are appearing longer (height) than others (this is probably the correct behaviour for isotope grid). I was just wondering if there is a quick way to ensure all images appear the same height or does it mess up the scaling? I've tried changing height of nf-item but to no avail

Cheers

PS this maybe an isotope fix so appreciate it isnt the template just wondering if anyone else had this requirement.
Just mailed you and waiting for your reply.
Please send me your Email
Hi,

I have a question... How can i create an inner zoom animation, like revolution slider, on the flexslider image?

Thanks
Hello! Friend,

flexslider in default animation option is only "fade" and "slide",

According to my perception of you in flexslider custom Zoom (Ken burn) effect can be.
And a Zoom effect with the help of the JS and CSS3 Plugins Can Solve.
Hello,
I need help with the portfolio tags. I can't found and edit the categories, like .coffee .branding...

Thanks

G.
Yes, I am able to help you,
please send me email your required detail with your HTML page.

Email : support@nileforest.com

Thank you very much for choosing Mazel template!
grbspltt PURCHASED
I'm building my website using your template, really excited to get the full site up. Right now I'm using the Coming Soon page (http://theme.nileforest.com/html/mazel-v1.1/home-coming-soon.html) page to countdown when the full site goes live. Right now I'm having an issue with the appearance on the Coming Soon page on mobile, specifically iPhone 6. The dark overlay does not cover the full screen, and the logo and email + phone sections cover up the main content. Please fix soon! Thank you.
please open "home-coming-soon.html" file find in
This JS function script
----------------------------------------------------
function headerResize() {
var winWidthMd = $(window).height();
if ($(window).width() > 767) {
// alert('deskstop');
$('.full-screen-intro').css({ "height": winWidthMd, "padding": "0px 0px" });
}
else {
$('.full-screen-intro').css({ "height": "600px", "padding": "400px 0px" });
};

};
-----------------------------------------------------

REPLACE TO THIS SCRIPT
-----------------------------------------------------
function headerResize() {
var winWidthMd = $(window).height();
if ($(window).width() > 767) {
// alert('deskstop');
$('.full-screen-intro').css({ "height": winWidthMd, "padding": "0px 0px" });
}
else {
$('.full-screen-intro').css({ "height": "600px", "padding": "400px 0px" });
$('.full-cap-wraper').css({ "display": "block", "padding-top": "170px" });
$('.content-caption').css({ "display": "block" });
};
};
-----------------------------------------------------

Help & Questions? feel free.
via email : support@nileforest.com
grbspltt PURCHASED
That looks great, thank you!
Great template with many useful components.

Quick question, how do I get the particle effect to also work on the "home-section-scroll.html" template (only on the top slide (#section-a)? I saw the particle effect on the "onepage-canvas-pattern.html" template but I would like to use the effect on the "home-section-scroll.html" template. I have tried so many different things without any success. I am thankful for any help you can give me.

Thank you for a great template!
This resource is used in Mazel template,
And there are 4 different animated pattern.
Check now this url...
http://tympanus.net/codrops/2014/09/23/animated-background-headers/
----------------

To see more of the other resource use.

http://codepen.io/search/?depth=everything&limit=all&order=&page=3&q=Animated+Backgrounds&show_forks=false

http://codepen.io/search?q=canvas+Backgrounds&limit=all&order=popularity&depth=everything&show_forks=false

----------------------
Thanks for the choosing Mazel template!
Thank you for the links. I was already aware of them, and they did not help. :) Fortunately I found the solution myself.

Solution: Go into onepage-canvas-pattern.html and copy the code related to the particle effect:

<section id="intro"> <!-- class="full-screen-intro bg-img29"> -->
<div class="media-wapper bg-img parallax parallax-section1 overlay-dark"> <!-- style="background-image: url('img/full/04.jpg');"> -->
<canvas id="pollyfill-canvas"></canvas>
</div>
</section>

and then place it in the home-section-scroll.html BELOW the line reading:

<div class="section bg-img28 overlay-dark light-color" style="background: url('img/full/28.jpg')" id="section0">

That took care of it! Reader, please notice that I commented out the image path in the particle code. I did this so you would recognize the code. You can simply delete the image path completely.

P.S. Watch out for dependencies. Copy & paste these plugin scripts to the bottom of your html:
<script src="js/plugin/TweenLite.min.js" type="text/javascript"></script>
<script src="js/plugin/EasePack.min.js" type="text/javascript"></script>
<script src="js/plugin/pollyfill.js" type="text/javascript"></script>

Thank you for an awesome template! :)
qesya PURCHASED
GREAT! it looks great! I needed support and Niletheme helped me very fast!
Excellent work, I absolutely recommend it!!!
Thank you so much for such a wonderful comment.

Many many thanks!!!
Hi,

just start building a first Homepage with this great template.
One question:
On some sides the color of navigation is white, on other sides ist is black.
Where do you adjust this property?
In "navigation.css" I only find the dark color "color: #323232;" at line 88.

Thank you for that template and for helping :)
Hi!,

Sidebar menu to change the color of open "style.css" file find in line no. 1975.
-- and--
Navigation menu to change the color of open "navigation.css" file find in line no. 259.

It is my suggestion that color change will be easier if you use the browser firebug.

------------
Thanks for the choosing Mazel template!
Hi wonderful theme, I have a slight problem though, I am not able to scroll...Can you please let me know what I missed..I copied and pasted all the files.

Thanks
Hi! friend,

JS, CSS, and IMG (images) file, which must be in place to keep it right there.
You can also HTML FILE Add and Remove.

Before you can check to see that the file (Css, Js, Img) path is given exactly.
The path will be given exactly the same thing will not be any bugs.

Thanks!!

-------
Any Help & Question feel free
support@nileforest.com
Greetings,

Love the theme!

Just trying to hook up woocommerce, and I have located the PHP file,
what is your recommendation in doing so?

Thanks
Hi! friend,

yes this Template you can create in wooCommerce.

I'm just a Front-End Developer & Web Designer,
my skills is just ( HTML, CSS, JS, Photoshop).

I am sorry, I can not tell you more about wooCommerce.
Ask the right person for her.

Thanks!!!
Hello

Great theme, i'm building my webshop around it.

The problem is with iOS (iPhone, ipad) the .bg-img1 classes dont work. The images dont scale properly. Www.uberglam.be

Do you have a fix?

Monique
Hello

Regarding the .bg-img1 to .bg-img30 classes ... i found a solution that also works on iOS ... http://srobbin.com/jquery-plugins/backstretch/ - see it in action www.uberglam.be (under construction).

Regards
Monique
Great :-)

Please feel free to contact us if you need further assistance.

----
Thank you very much for choosing Mazel template!
peterw02 PURCHASED
Hello moniqueelliot!

Since you have solution for .bg-img problem with iphone/ipads, where those bg pictures do not scale right, I wonder if you can help me with this one.

On your site they do scale right and I have checked your source code and style.css, but where do you define your .bg-img99 picture on your homepage? I did not find it anywhere.

On style.css there are .bg-img1 - .bg-img30, but nothing about .bg-img99. I have also attached jquery-backstretch-min.js like you have, but I don't get this scale right.

Please, any help would be appreciated. I did ask nileforest few times, but no solution from there.

TY,
Pete
Hello

In internet explorer, the "add to cart" button is on top of the image, not vertically centered. (http://theme.nileforest.com/html/mazel-v1.1/shop-4col.html).

<a class="btn btn-line-xs btn-white-line"><i class="fa fa-shopping-cart"></i>Add To Cart</a>

Is there a fix?

Thanks
Monique
please replace this CSS code in "Style.css" file

-----------------------------------------
style.css ( line : 3259 )
-----------------------------------------
.shop-item .item-mask .item-mask-detail
{
display: table;
height: 100%;
width: 100%;
}

-----------------------------------------
style.css ( line : 3266 )
-----------------------------------------
.shop-item .item-mask .item-mask-detail .item-mask-detail-ele
{
display: table-cell;
vertical-align: middle;
}

------------------------------
This code replace will be vertical align middle inside of IE browsor

Thanks! ;)
Zelakto PURCHASED
Hi, for some reason, the website suddenly shows an infinite loading symbol when connecting. Loading the webpage locally is fine. Can you help me please? Thank you!
Hello, I am able to help you.
please Send me your website Url to i checking.

Via Email : support@nileforest.com
smdgfX PURCHASED
Hi,

the video component via mediaelements seems to be always looped.
/element-video-and-audio.html

How can we fix this?
smdgfX PURCHASED
Ups, sorry... the URL http://html2.brodhecker.de/main.html#arbeiten
smdgfX PURCHASED
Sorry... I've send the link via Email: support@nileforest.com
Hello,

Open "theme.js" file and line no. 433 Find This code,
Replace to This Code
-------------------------------------
$('.video').mediaelementplayer({
loop: false,
enableKeyboard: false,
iPadUseNativeControls: false,
pauseOtherPlayers: false,
iPhoneUseNativeControls: false,
AndroidUseNativeControls: false,
enableAutosize: true
});

Thanks for the choosing mazel template!...
smdgfX PURCHASED
Hello,

perfect, thanks a lot.

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$10
3391Purchases

Licenses: Details »

Single application $10
Version:2.1
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:No
Categories:
Tags: blog, bootstrap 4, business, corporate, ecommerce, html5, multipurpose, portfolio, responsive
Item#:WB0BG4711
Released:2 years ago
Updated:5 days ago
Sold exclusively on WrapBootstrap
niletheme

niletheme

Signed up 2 years ago

Need an admin theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: