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

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

by
by
by
by
by
by