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

52 comments found

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

simonswiss

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.

simonswiss

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 :-)

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. :)

simonswiss

Thanks! Working hard on it – hopefully available soon!

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.

Default-user

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>
simonswiss

Hi,

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

simonswiss

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

simonswiss

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">
    <figure>
        <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>
    </figure>    
</div>

The jQuery to add in js/custom.js

$('.video').magnificPopup({
    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 :-)

nicholaspeters

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

simonswiss

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!

simonswiss

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!

simonswiss

Hi Didoz,

The development of the WP version has taken much more time than planned – for various reasons.

I have replied to your e-mail – we are still working on the WP version of Booom and should be able to release soon. My apologies for the long delays, i wish i could have shelled it out a long time ago already.

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.

simonswiss

Hi,

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!

Default-user

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.

simonswiss

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.)

simonswiss

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.

Default-user

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

simonswiss

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

Hi,

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?

Thanks

simonswiss

Hi,

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>
        </ul>
    </li>
</ul>

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!

Simon
Default-user

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.

Example:

<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.

by
by
by
by
by
by