Discussion on Booom! - One-Page Flat UI Pro Bootstrap 3 Template


simonswiss supports this item


57 comments found.

gr8 theme m8!! Inspired us on (the very basic) hairmob.com.br. Keep up inspiring!! :)

Nice! Thanks for sharing! :-)

Love it! Any plans on having this as Wordpress theme?

Too bad I’m not a developer :( I’m just a designer with good knowledge with wordpress.

Thanks for the kind words!

The WordPress version is actually coming soon – we are currently on the final stages of development. Click “follow” on my profile to see when the WP version is out, or send my your e-mail via my contact form so i can notify you directly :-)

Hey – just letting you know the WordPress version of Booom! is finally available here: http://themeforest.net/item/booom-wordpress-theme-with-the-flat-ui-pro-kit/12867041

Better late than never!

We are currently using your Boom ‘Under Construction’ page for WhichEmail, a new email comparison website. We look forward to seeing the WordPress theme when it launches. :)

Thanks! Working hard on it – hopefully available soon!

Hi – I am very sorry it took so long.. but it is now finally here: http://themeforest.net/item/booom-wordpress-theme-with-the-flat-ui-pro-kit/12867041 :)

Problem with the navigation on iOS handhelds.

1. The menu does not stay fixed to the top of the window when you click on a menu item when viewing on mobile (iOS … iPhone) devices.

2. In the main.css file on lines 10242-10245 you have @media (max-width: 767px) { #header .navbar { position: relative; }

If I change the position to fixed then it makes the menu fixed but the menu does not close when clicking an item. It stays open and you have to click again the menu icon.

It would be better and more user friendly if: 1. The menu would stay fixed on mobile devices 2. When clicking on a menu item on a mobile device that the page would scroll to that section and the menu would automatically close.

Ok, after reading up on the bootstrap framework, I found that you can add the following to each menu item to make the menu close after clicking on a menu item.

data-toggle="collapse" data-target=".navbar-collapse"

So the menu item would look like this:

<li data-toggle="collapse" data-target=".navbar-collapse"><a href="#features">Features</a></li>


The navigation was designed that way, to save up some space on small mobile screens. If you need the sticky navigation for mobile devices too, you can remove the css that changes the position from ‘fixed’ to ‘relative’ in the mobile media query.

I don’t think a fixed navigation on mobile devices is necessarily better UI – most people, when navigating on their phone, just scroll down and don’t really use a navigation menu. The nav is there for them at the top of the page if they want to access the sections, but then it gets out of the way to give the content more space to shine.

In the context of a single-page design like this one, which typically is scrolled from top to bottom, i thought it made more sense to let the nav scroll out of the way, since the menu items are not critical to access the content.

Hi, really a great theme! One question, is it possible that the parallax background image is also visible if the width of the browser (like the other images) is changed or i view the site on an iphone? In the demo the image is not visible if i change the width of the browser or open the site on my iphone (only background color with the text). Changing css but how? Thank in advance DT

Hi, yes absolutely. I have disabled the image on mobile phones because i thought it was a bit too much clutter, but you can show it very easily:

In main.css, at the bottom in the media queries, remove the following line and it will show again:

#hero { background-color: #ecf0f1; }

Hope it helps!

Thanks for your fast support! In works… :-) Kind Regards DT

Hi Simon

Is it possible to use videos in the gallery? My videos are hosted on Vimeo, and I tried to use their <iframe> as the link in the site, but could note get the video to open. Thank you. Nick Peters

Ok here we go. If i remember correctly, the video popup only works on live servers, and not locally.

As per the documentation of the Magnific Popup plugin, you need to add a class to your video link and add a bit of jQuery to trigger the popup.

Here is an example with the added class of .video:

The Gallery Item Code

<div class="col-lg-3 col-md-4 col-xs-6 gallery-item all kittens">
        <a class="video" href="http://vimeo.com/7449107"><img src="http://www.placehold.it/640x480/0099aa/ffffff&text=Vimeo+Popup" alt="gallery-image" class="img-responsive" /></a>

The jQuery to add in js/custom.js

    type: 'iframe',      

You can add that code just after the Magnific Popup call. The important thing is that the class needs to be the same in both the HTML markup and JS call

Here is a demo link i used to illustrate the two options – scroll down to the gallery section.

Hope it helps – consider giving a good rating to my item if you appreciate the efforts :-)

Thank you Simon. Again, great job on the theme.

Thanks for the kind words and the rating – it means a lot :-)

Hello, nice theme!

I can´t get access to the support forum with my purchase code, i have following issue:

The downloaded code and the demo link you posted above have issues with the carousel control. Look at how they are aligned.

The themeforest demo looks nice. Do you have fix for that? Thanks!

Hi – could you send me a screenshot of the issue via my contact form? I’d be happy to help out but i need more information about the issue – what link posted above do you refer to?


Didoz Purchased

When you will launch the WP version? Have been waiting for it long time ago!


Didoz Purchased

Hi dear, any update?


Sorry it’s taking so long. The developer assigned to this task has recently taken a full-time job so it’s taking much longer than it should. We’ve completed 90% of the way, so i feel stuck right now as i’d like him to finish the work.

I’ll make sure i’ll get in touch with you ( i have your e-mail) when i got some news or more precisions.

Sorry again it’s taking forever to come out!

Hi Didoz!

I know you asked many times, and you probably thought it would never come. You might as well have moved on.. but – here it is – the WordPress version of Booom! http://themeforest.net/item/booom-wordpress-theme-with-the-flat-ui-pro-kit/12867041


I purchased this in a bundle and thought I’d try this out.

Your instructions appear to reference an outdated version of MODx or maybe I’m doing something wrong. For example, there is no “Components menu, so I’m having a difficult time updating the Theme Options.


The procedure to install the theme is still the same, only a couple of menu names have changed. The theme options are now in the “Extras—> Configuration” menu:


If you cannot see this menu, be sure to have the “ClientConfig” package installed in “Extras—> Installer”. Sometimes it doesn’t load with the theme import, but it can easily be installed manually.

Hope it helps!

Thank you, that was a perfect response. For some reason, ClientConfig would not install neatly, even when adding a new provider, so I downloaded it and used the upload option, just like I did this theme. It installed and the Configuration menu option is now there as you illustrated in your screen shot.

You provide amazing support, especially for someone one purchased this w/ the Envato Birthday Bundle! This is my first time hearing about MODx but I’m definitely going to consider your templates in the future if this one works out.

Good luck.

Great, glad i could help, bundle or not! :)

MODX is great and very powerful – i hope you’ll enjoy working with it!

I have a couple of really quick questions: 1.) When I tried to insert the standard Google Analytics script, MODx won’t save in General Settings. I removed the < script > tags just to see if it’d work and it did, although it just outputted as text under the footer. So the < script > tag seems to be freezing up MODx. Is this field expecting anything else outside of what Google Analytics provides?

2.) How do I disable the Twitter section, since this client doesn’t have a Twitter account?

3.) How do you change the title of the home page? (I know, I feel dumb lol) No matter what I name the homepage, it still says “Booom !|” in front of it. (Booom! followed by the pipe symbol.)

0) This comment thread is for the HTML version of the Booom! If you have other questions, please use the MODX version comments.

1) Great to hear about the modx_clientconfig_setting table trick!

5) To add an id attribute to each menu item, i would edit the nav_li chunk that is responsible for outputting each navigation element and add an id attribute there with whatever value you need :


Here is a larger image link.

Oh no!!! I didn’t even realize I was posting on the wrong product!!! I’m very sorry!

5.) Thank you, you just taught me what the heck a “chunk” was; I was wondering about that! lol

No problem, don’t worry about it. Glad i could help :)


I realize that this was created as a ‘one page theme’ but I bought it hoping to use it to for a multipage site. I can manage everything just fine creating multiple pages with dropdown menu’s and such except that in tablets and phones the dropdown items do not appear.

Can you offer any suggestions as to what I might change to sort this issue?



Be sure to have the correct classes in your HTML markup, as per the navbar markup from Bootstrap 3: http://getbootstrap.com/components/#navbar-default

You should see the dropdown submenu items in all responsive layouts with the following navbar markup:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret" /></a>
        <ul class="dropdown-menu">
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 2</a></li>
            <li><a href="#">Sub link 3</a></li>

Submenus may need some CSS styling as the template didn't really cater for them, but they should show up in both the normal navbar and the mobile dropdown one.

Hope it helps!


Hi Simon,

Thanks for the help … indeed this does get things working.

There is one other issue I am seeing by doing this and I am hoping that you can help.

Suppose I want the ‘Parent’ link to also be an actual link that when double tapped on iOS or clicked on desktop it will go to that page.


<ul class="nav navbar-nav navbar-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li class="dropdown"> <a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret" /></a> <ul class="dropdown-menu"> <li><a href="#">Sub link 1</a></li> <li><a href="#">Sub link 2</a></li> <li><a href="#">Sub link 3</a></li> </ul> </li> </ul>

The above code works great on a desktop because when you hover over the parent link the sub menu appears and you can click on either a sub-item or the parent item. However, on iOS or touch devices when you tap the parent, the sub-menu appears but you are not able to actually go to the page that the parent links to.

I have scoured the Bootstrap website and several forums looking for a solution but I’ve been unable to find a solution.


Didoz Purchased

what happened to the wordpress theme?


Didoz Purchased

I really hope to have it done asap, i have been waiting more than a year :(


Didoz Purchased

any luck?


Didoz Purchased

Any update regarding the wordpress version?


I’d love to give more news, but i am struggling to get in contact with the developer that’s working on it. I am really disappointed it is taking so long…

I will let you know as soon as i have some news, please stop asking in the comments section :)

Hi! Any chances for Wordpress version?


The WordPress version was being developed by a partner, but things are taking very long and i cannot give you an official release date, although i wish it would have been available a year ago already :)

If you contact me via my profile contact form, I will send you a message when it becomes available.

Hi! Amazing template! If i buy this theme – i can use Flat UI Pro controls? Where i can find the documentation online for FlatUI Kit Pro?

Hi – thanks for the kind words!

Yes, the whole Flat UI Pro kit is included in the template, so you can use any of the components that you can seee here: http://designmodo.com/flat/

However, the licence terms doesn’t allow you to re-use the Flat UI Pro kit outside of the template: you cannot start building other websites using the kit – you need to purchase a licence with Designmodo for that :)

Hope it helps!

hello, is flat ui pro included in this theme? as a full ui elements? thanks.


Sorry for the delay in my answer! Yes the full Flat UI Pro Kit is bundled with the template, including the different UI elements demo HTML files.