UXBARN supports this item


49 comments found.

Really like this theme. Have just one question though.

It regarding the slider, when viewed on mobile screens, the slider-caption text disappears! Please let me know if this can be fixed?

Hi there!

Unfortunately, due to the terms, I could not provide that. Each item would need to be purchased separately.

I understand, was just trying my luck :D Will buy the WP version once the client approves the design. Cheers!

Cheers! ;)

how would you change the size of the header?


You would need to manually edit the CSS for that.

In case you would like to check the CSS of the elements, I would recommend “Developer Tools” on Chrome or “Firebug” on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.


I’ve made my site but have noticed a responsive issue that isn’t evident on the wordpress version and was hoping you could help.

On the home page the three boxes (left one full length, right two half length)

when going into mobile view the images don’t scale to fit the screen,


any chance you can advice me on the HTML to fix this? occurs on your demo too.

Thanks so much


Hi Aaron,

Please try this:

1. Open ”/js/archtek.js” file and search for this code:

if(width <= 479 || (width >= 768 && width <= 959)) {

2. Change it to:

if(width <= 767 || (width >= 768 && width <= 959)) {

This should help!

Hi. sorry its taken so long to reply. This hasn’t worked, if you resize the browser to almost phone size, you can see the images on the homepage fail to resize to fill their containers. This is still evident on your demo also.

many thanks


OK. In addition to the previous fix, add below code into the “archtek.js” file:

$(window).resize(function() {
        var width = parseInt($('.content-width').css('width').replace('px', ''));
        if(width <= 767 || (width >= 768 && width <= 959)) {
            if($('.stretch-image').length > 0) {
                $('.stretch-image').each(function() {
                    var originalImg = $(this);
                    var parentTag = $(this).parent();

                    parentTag.find('div.backstretch').find('img').attr('alt', originalImg.attr('alt'));


This should make it work when resizing the browser.

Please also clear all the web and browser caches after the update.

Beautiful design. Would this be easy to update to Foundation 5? Many thanks


Thanks for your interest. :)

I have never tried updating the framework but I think there might be some code or CSS to adjust after updating.

You can also find the guideline from here: http://foundation.zurb.com/docs/upgrading.html


i just bought your template and realized an responsive issue right away and i hope you can help fix it. You can reproduce it also in your live preview. Load the website in 740px width:


..and resize the browser window to >1200px. The home-slider image is not resized accordingly/properly:


Can you please help fix this?

Best regards. Imig

Please try adding one more CSS into the ”/css/archtek.css” file:

#home-slider-container .caroufredsel_wrapper {
    height: 100% !important;

I just updated and cleared the CDN caches of the demo site. It should be fine this time.

Anyway, I could not see your site. I only see a default page. (screenshot: http://cl.ly/image/151J2t0e052e ).

Now it works. Good job. Thank you!

You are welcome!

I’ve obviously manages to tweak something silly here, but for some reason the menu no longer highlights the active page. It just stays on Home, no matter what page I’m on.

any ideas?

Many thanks in advance


Hi Aaron!

If you are using HTML version, just be sure to include the “active” CSS class on the menu item. For example:

<a href="about-us.html" class="active">Home</a>

But if you are using PHP version, make sure that at the top of the PHP file, you have this code (the code below is for About Us page):

$page = 'about';
$title = 'About Us | Archtek.';

And in the “template-header.php” file, put the code like this into the menu item to echo the “active” class when the $page variable value is “about”

<?php if($page == 'about') { echo 'class="active"'; } ?>

You can also see all of these examples in the purchased package.

Hi, brilliant theme,

trying to get fancybox to work on the portfolio. how do I do this, please?

Thank you

Hi there!

So you have purchased the HTML version and I could see the badge now. :)

Did you mean you want to use fancybox on the portfolio items (portfolio thumbnails)? If so, unfortunately there is no code for that out of the box. You would need to manually customize the code to implement that.

For the guideline, please open ”/js/archtek.js” and you will see that the fancybox initialization will call the element with ”.image-box” class. Just apply this class to the anchor tag that wraps around the image.

You can find the obvious example in “gallery-1.html” and “gallery-2.html” files about how to use fancybox on images.

I’ll give that a go, thanks for your help. I really do think your templates are great – especially with the php option.

Thank you! :)


Great theme package!

Wondering as to how your change the background color behind the logo on mobile device? I manage to change the background color from black to white as it appears on the desktop and tablet but mobile still shows black. Can’t seem to find the CSS code for it.

Any help will be greatly appreciated.


Hi there!

Please try using this CSS:

@media only screen and (max-width: 767px) {

#header-container {
    background: #777;


It will use ”#777” for the header background if the current viewport is equal or lower than 767px.

I would recommend the tool from this site: http://responsivepx.com/ . It can help you simulate the viewport size then you can use Developer Tools on Chrome or Firebug on Firefox to inspect the CSS. :)

Sorry for the late reply. Thank-you!

You’re welcome!


We are going to take a vacation from November 21 through November 25, 2016. So we might not be able to respond to your ticket on a daily basis.

If you have any questions about the theme, please try searching our support site ( https://uxbarn.ticksy.com/ ), check out the articles on that site ( https://uxbarn.ticksy.com/articles/ ), search through the comments of the purchased item on ThemeForest ( https://themeforest.net/user/uxbarn/portfolio ), and check out our website ( https://uxbarn.com/ ) for some more useful articles.

Thank you.