66 comments found.
Good day, This is a great template, very easy to work with and stylist. I am having one issue with the position of logo on the header. Can the logo be re-position and placed in the center of the white circle or can I remove the white circle so the logo will sit on the header.
Thank you in advance
One additional question, can you let me know how to have chief section on home page show on mobile devices.
Thank you in advance for response on both questions.
The position of the logo can be set with the following code.
.header-type2 .inner-ring .logo{ margin-top: -85px; }
Margin top will be half of your image size. But that would move the image out of viewport. To adjust you can adjust or minimise the value of margin-top to suit your needs.
To remove the white circle, from behind the logo, you can use the following code:
.header-type2 .inner-ring { background-color: transparent !important; }
To show the chef section in mobile view.
@media (max-width: 991px){ .meet-chef{ display: block !important; } }
How to change google map?
Hi,
I’m sorry but could you please be a little more specific? Do you want to change Google Maps and use some other map instead? Or do you want to change the coordinates/location where the Google Map’s marker is pointing at?
Thanks.
Hi. How can i disable mobil version?
Hello,
You mean you want to disable mobile styles? For that, please find the following line in your HTML file and remove/delete it :<link rel="stylesheet" href="dist/mobile.css">Hope this helps.
Yes, i want to disable mobile version. I already do that but nothing changed.
will you help me?
Sure, today our offices are closed, we will get back to you on Monday our time, thanks!
Yes, i’m waiting you.
Hi,
Thank you so much for your patience. Please follow the link given below and replace all the contents of your ‘style.css’ file with the contents of the link provided below:
http://0effortthemes.com/spice_css/style.css Also, in your HTML files, remove the following stylesheets:<link rel="stylesheet" href="dist/tab.css"> <link rel="stylesheet" href="dist/mobile.css">
This should remove all mobile styles from your site.
i can’t copy from your link to my css because i modified it. all settings will gone. but i also delete from HTML files: <link rel=”stylesheet” href=”dist/tab.css”> <link rel=”stylesheet” href=”dist/mobile.css”>
Okay, I understand. Actually, this theme was made to be responsive and work on all devices, as it has been advertised. To make it work for desktop only and to keep your style additions, we will need to edit your CSS file.
If possible, please mail your CSS file to us at 0effortthemes@itobuz.com so that we can keep your styles and edit the rest.
Hi, I love this theme and really would like to buy this. I’ve just one question: Is there any way to add user maintenance to this? Like customers can register, place catering orders and can customize/ review the orders.
Again, great job with the theme.
Hi, since this is an HTML theme, there needs to be an actual backend for this to give all those features you are asking for, those are not available on this theme. So either, you can buy this theme and hire a developer to integrate that stuff for you or you can wait for us to release a WordPress version of this theme 
Hello! I’ve been trying to get the header to be sticky with scrolling though it doesn’t play nice with paralax backgrounds for sections in this theme. Did you have any suggestions for accomplishing this? Thanks so much!
Hi,
Thank you for purchasing our theme. I’m sorry, it’s not very clear as to what you exactly mean by “doesn’t play nice”. It would help if you could share a link to your site so that we can take a closer look, or share a screenshot so that we may see and understand how exactly it is appearing.
I’m sure there will be ways to work around it once we have a look.
Hello, I love your work! I am interested for a client, but avri needs a theme on wordpress. The client wants to enter personal products and descriptions, to change periodically.
Do you have a solution in wordpress?
Thank you very much.
Hi,
I’m sorry but the wordpress version isn’t available yet as it is in the process of being built. It will be uploaded on Themeforest once we finish building it.
hello; I want to buy the designs, but, I need: 5 main menu and 2 main manu – submenu, design Does it support it? thanks
Hi,
Did you mean 5 main-menu items, out of which 2 will have sub-menu/dropdown? If you meant that, then yes it does support it.
JUST FOR REFERENCE: Presently, there are 4 main-menu items (HOME, MENU, NEWS, PAGES), out of which 1 has sub-menu/dropdown (PAGES).
Hi, My logo is oval and i want it to cover the middle of the heading showed in white, how to do that?
Hey there,
You can change the position of your logo in your ‘style.css’ file located in the root directory of your project by changing the ‘top’ and ‘left’ values of the following code (somewhere near line no. 9816)...
.header-type2 .inner-ring .logo {
position: absolute;
top: 48%;
left: 50%;
z-index: 40;
}
Hope this helps. Incase if you need further help, it would be great if you could share the link to your site so that I can take a closer look.
And thank you for purchasing our theme.
thank you. I want the photo to be on the background of the text on the home page. Also I would like the menu to be toggled menu sorted by category, available in PDF or on the site, but without the photos as you did on the food gallery.
Thank you
Hello,
I’m sorry, I could not understand clearly what you meant. It would really be helpful if you could please take screen shots and explain the areas you want to change. You can also mail us at 0effortthemes@itobuz.com
Thank you for your patience.
I was wondering if you could tell me how the map works? I am trying to change it but dont know where to do it. also i dont see a mail.php file to redirect the email.
another thing. I dont see where the social media codes are.. I’m trying to place the links in but dont see the line of code
ok i found the mail.php file and added what i needed and found the bottom half of the social media links but I cant find the top ones .. where are they located on top?
Hi,
The map options are present in the ‘myCustom.js’ file in ‘_assets/js/’ directory of your project root folder.
/*----------------------------------------------------*/
/* Google Map
/*----------------------------------------------------*/
if($('#map-canvas').length != 0){
var map;
function initialize() {
var mapOptions = {
zoom: 8,
scrollwheel: false,
center: new google.maps.LatLng(-34.397, 150.644),
styles: [
{"stylers": [{ "hue": "#dd0d0d" }]},
{
"featureType": "road",
"elementType": "labels",
"stylers": [{"visibility": "off"}]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [{"lightness": 100},
{"visibility": "simplified"}]
}
]
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = '_assets/images/map-marker.png';
var myLatLng = new google.maps.LatLng(-34.397, 150.644);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
You can change the Latitude and Longitude of the location you want to show in this line…
center: new google.maps.LatLng(-34.397, 150.644),
The top social links are present in all the HTML pages near line no. 88.
<!-- ========= SOCIAL BUTTONS ========== -->
<ul class="social-btns clearfix">
<li><a class="youtube" href="#"><i class="fa fa-youtube" /></a></li>
<li><a class="vimeo" href="#"><i class="fa fa-vimeo-square" /></a></li>
<!-- <li><a class="behance" href="#"><i class="fa fa-behance" /></a></li> -->
<li><a class="twitter" href="#"><i class="fa fa-twitter" /></a></li>
<li><a class="facebook" href="#"><i class="fa fa-facebook" /></a></li>
</ul>
Hope I was able to help you out with your problem. Thank you for purchasing our theme.
thanks it worked
how do I change pincode to zip code?
Hi,
Do u mean the placeholder text of the form in the map section? The following lines of code will be present in all the HTML pages towards the bottom of the page (at different line numbers, due to different page content).
<form id="map-search-form">
<div>
<input type="text" id="mapCity" name="mapCity" placeholder="Enter your city name">
</div>
<div>
<input type="text" id="mapPin" name="mapPin" placeholder="Enter your pincode">
</div>
<button class="button">FIND NOW</button>
</form>
For example, in “index.html”, it is present near line no. 1120. You can change the placeholder text from “Enter your pincode” to “Enter your zipcode” or to any other text that may seem fit to you.
Also, in ‘myCustom.js’ file in ‘_assets/js’ directory of your project folder, find the following lines of code :
$("#map-search-form").validate({
rules:{
mapCity:{required: true},
mapPin:{required: true,number:true,minlength:6}
},
submitHandler: function (form) { return false; }
});
...and replace it with the following to enable alpha-numeric entries for zip code:
$("#map-search-form").validate({
rules:{
mapCity:{required: true},
mapPin:{required: true}
},
submitHandler: function (form) { return false; }
});
Hope this helps. Please rate our theme, if you haven’t already.
Thanks.
Hello, I have had to edit your myCustom.js so that multiple modals on a page can exist. As the theme stands, opening one modal would cause any and all modal overlays to appear and conflict with eachother. I’ll admit now, I still think jQuery is magic so don’t fully understand what I am doing.
var overlay_name='.menu-overlay';
var modal_name='.menu-modal';
var str_order='';
var len=0;
$('.place-order-now-btn').click(function () {
if (dish.length == 0) {
alert("Sorry, you must select an item to continue with your order.");
}
else {
$(overlay_name).addClass("disp");
var modalHeight = $(modal_name).height() + 200;
From that snippet, you can see that for each unique instance of an overlay that I require, I change the overlay_name and modal_name variables which I added and just appended those same names to the front of the class property on their respective DIVS. Maintaining the style by adding the original class name afterwards.
<div class="menu-overlay overlay">
<div class="menu-modal modal order-page">
My problem comes about in trying to close the overlay despite everything else working.
$('.inside-body-wrapper.menu-pg '+modal_name+' .fa-times').click(function () {
$(modal_name).removeClass('animated bounceIn');
$('.inside-body-wrapper.menu-pg')
.find(modal_name).addClass('animated bounceOut')
.delay(800)
.queue(function(next){
$(".inside-body-wrapper.menu-pg "+overlay_name).removeClass("disp");
$('.inside-body-wrapper.menu-pg').css("max-height","inherit");
$('.inside-body-wrapper.menu-pg '+overlay_name).css("height","auto");
$("#order-form button.grey-btn")
.prop("disabled",false)
.addClass('green-btn')
.removeClass('grey-btn disabled');
$( this ).dequeue();
});
// RESETTING FORM AND ITEM ARRAY ON CLOSING POPUP
$('.form-message').hide();
$('#order-form').children('input').val('');
selectedDishes = 0;
$('.price-add-select .button.red-btn')
.removeClass('clicked')
.closest('.price-add-select').find('.button.green-btn').removeClass("clicked")
.closest('.price-add-select').find('.button.white-btn').addClass("clicked");
$(".selected-dishes-no").html(selectedDishes);
dish = [];
});
If you have any suggestions for me to help, I would greatly appreciate it.
Hi,
The ‘overlay’ div is the translucent black screen that appears on the click of ORDER NOW button, while the ‘modal’ div is the dialogue box that appears inside the overlay. Therefore, you don’t really multiple overlay divs for each and every modal div that you may want to show. All the different modal divs can be placed in a single overlay div.
Something like this..
<div class="overlay">
<div class="modal order-page">
...........
..........
</div><div class="modal menu-modal">
...........
</div>
</div>
On the click of specific buttons, its specific modal can be made to appear (calling it by its unique class name) inside the the overlay div, while the other modals remain invisible.
Something like this…
// CODE TO SHOW ORDER-PAGE MODAL
$('.place-order-now-btn').click(function () {
if (dish.length == 0) {
alert("Sorry, you must select an item to continue with your order.");
}
else {
$(".overlay").addClass("disp");
var modalHeight = $(".modal").height() + 200;
$('.inside-body-wrapper').css("max-height",modalHeight);
$('.overlay').css("height",modalHeight);
$('.modal.order-page').css("display","block")
.removeClass('animated bounceOut')
.addClass('animated bounceIn');
...
}
...
});
// CODE TO SHOW MENU-MODAL
$('.menu-modal-btn').click(function () {
$(".overlay").addClass("disp");
var modalHeight = $(".modal").height() + 200;
$('.inside-body-wrapper').css("max-height",modalHeight);
$('.overlay').css("height",modalHeight);
$('.modal.menu-model').css("display","block")
.removeClass('animated bounceOut')
.addClass('animated bounceIn');
...
});
The above JS code could also be written in a shorter form, based on your requirement. I wrote the long version so that you could get the picture of having one common overlay div and multiple modals inside it.
I could probably be able to help you out better if you could share the link to your site so that I can check the issues in person.
We would love to give you further support, but for that you will have to purchase the theme.
Thank you so much for your reply! We have indeed purchased your theme. My partner purchased it on her account though I’m developing the site. I would like to add that we love the theme! Well done in producing it!
Your reply was very useful in aiding me to develop multiple modals per page so thanks again. I found my issue just now as well. While I was, in a sense, templating the theme, I created a single header file included across all pages and in this standard header, the class wrapper was changed from
.inside-body-wrapper.menu-pg
to
.inside-body-wrapper.index-pg
A silly little change that of course had a huge impact on being able to close the modal referencing that class! Rookie mistake of course 
I was actually going to PM you the site address soon (probably late this week) to showcase what we have done with your beautiful product.
well in that case, glad it worked out for you and yea, we will be happy to see what you made out of this theme 
Hi. How can i add date and time section to reservation form on index page?
Hello,
The date and time options are included in our next update on the index page, which will be uploaded soon. You will automatically get a notification in your mail when the theme will be updated.
Thank you for your patience.
Hi I’m Sunil from Delhi. I want to Buy your WordPress License(Convert HTML and WordPress all rights). Basically we want a deal at 50:50% profit on total sale. Contact: sunilpujee@gmail.com
Please use private messaging for such offers.
I am not a programmer, and I purchased this item thinking it was easy as uploading etc. to customize the site. However, the item is for programmers, I am so confused. Is there anyway I can have a refund, or help building this site. I am so lost! Thank you
You should be able to apply to Envato for a refund if you feel the item did not help you.
I have a problem with FOLLOW US section on the bottom of the index page, this section disappears in mobile version. I need this module in mobile site because this my about section. Can you help me with this?
Best regards. PS. I love your theme.
Hi,
Thank you for purchasing our theme and for the compliment.
Did you mean the section with the ‘Contact Us’ form at the bottom of the index page? If so, then the solution is very simple.
In your html folder, open the ‘style.css’ file and find the following css code (should be near line no. 7500)...
.meet-chef,
.user-reviews,
.news-letter,
.contact-us {
display: none;
}
Replace the above css code with the following and save the file :
.meet-chef,
.user-reviews,
.news-letter {
display: none;
}
Now that section should be visible in both tablet and mobile devices.
Don’t forget to rate our theme if you liked it and if you haven’t done it yet.
Thank you and have a nice day.
Anyway to make that “login” button pop-up an automatic pop up when going to the website page?
Hi, thanks for purchasing our theme.
This feature is presently not included in the theme, but it can be added. For this, please send us a mail at 0effortthemes@itobuz.com
Is there any way to make the Nav Bar a sticky so that it stays while I scroll down?
On layout2 version
Hello,
Yes it is possible to make the Nav Bar sticky. In your ‘style.css’ file, add the following lines of code at the end of the file…
.header-type1 {
position: fixed;
width: 100%;
z-index: 999999;
}
This should do it. Let us know if it worked.
hello I am not able to open the image files in the folder image … of an error. Could not complete your request because the file format module can not parse the file.
Hey, sorry for the late reply
The image folder is called “Assets” which is located in the individual banner folders, where you can replace your image with the current image and it will get reflect in your publish files.
Exe: Google Web Design files\Awesome spices_160×600\assets
Thank you and congratulations on your work
Thanks
Any chance or timeframe if this will be converted into a Wordpress theme?
We are working on one. You can follow us on Twitter, Theme-forest to get an update as soon as its released. Thanks for your interest!
Hi
How can I make the map work with Canada postal codes like T0L 1Z0?
Thanks in advance
Hello,
In ‘myCustom.js’ file, find the following line of code (should be somewhere near line no.578).....
$("#map-search-form").validate({
rules:{
mapCity:{required: true},
mapPin:{required: true,number:true,minlength:6}
},
submitHandler: function (form) { return false; }
});
In the above code, delete just the portion number:true from the line
mapPin:{required: true,number:true,minlength:6}
The line should be like this…
mapPin:{required: true,minlength:6}
This should allow you to accept postal codes with alpha-numeric values. Let us know if it worked.
Hi,
I intend to purchase your great theme however, before buying it, please let me aks for some details: 1.) When I see the page of Menu on phone the order buttons are disappeared. Is it intentional or a bug? How can make order on Phone? 2.) Does the purchase form work and is it based on php? 3.) The Menu page is frozen on iPhone (Safari) in some case. Is it due to the code or the huge data? (It works without any problem on iMac’s Safari.)
Thanks
Hello,
Answering you queries…
1. This feature will be available in our next version. You can purchase the theme now and you will get all the future updates for free. You will be able to order from phone.
2. Yes, the purchase form works and is based on PHP. Any level of customization can be made on your request. For that you can mail us after purchasing the theme.
3. We are unable to find this issue at our end, but we are looking deeper into this matter.
Hi,
Thank you for your detailed answer. I am going to purchase this release, because it looks really awesome. Do you have any time frame, when you would launch the new version? (The slowdown/frozen issue occurred when Safari was downloading the Breakfast/Lunch/Dinner part on the Home page.)
thanks.
Hi,
Thank you for providing us the info about the slowdown issue on Safari on iPhone. We are still looking into this issue.
We are very sorry as we are not being able to give an exact time for the launch of the new version, but I can tell you this that it shouldn’t take very long.
The new version will be uploaded as soon as possible and you will automatically be notified.
Thank you so much for your patience.
