Discussion on Simpleflex - OnePage & MultiPage Flat HTML templat


mwtemplates supports this item


40 comments found.

Hello, i wanna make the top bar transparent, later when u scroll it make turn white again… how i do that?

Hello, tgrino! Sorry for long response! We had problems with comment notifications.

White background is set for ”#header” in your “main.css” file in line 413 of “modern” version and line 381 of lightweight version. You can change it to RGBA value ( ex.

#header { 
    background: rgba (255,255,255,0.3);

And when you scroll down, you can target to your header this way to change it’s background color:

.is-sticky #header {
    background: rgba (255,255,255,0.3);


I would like to know how I can change the height of the homepage animation slider ? Its quite large by default and i would like to make it thinner across the page when it loads.

any references to the specific classes greatly appreciated

Hello, pistachiomedia! Thanks for purchase! If you looking solution for first lightweight version, you might want to change code in line 147 of your “main.css” file.

#mainslider .container {
    padding-top: 201px;
    padding-bottom: 139px;
For “modern” version you can modify your “main.js” file in line 184:

    'dimensions':             "1170,800",
This is dimensions for your slider in pixels.

Best regards!

Hi! great work! i´ve just bought ir and it´s perfect, but i can´t find the gallery html, isn´t it included?


Hi, grubdc! Thanks for purchase. You can find “portfolio” section on a front page. If you need a separate gallery page, you can simple save “index.html” as “gallery.html” and remove all HTML code except “portfolio” section.

Best regards!

Hello, Thank you very much for your great template.

I have a question. In the opening slider sequence there is a link: Get More Info

When I change this to: <form><button></form>

The button shows up at the top of the page instead of where “Get More Info” was. Do you know how to fix this so that the <button> is shown in the same location?

The actual code is something like this:

<form name=”NAME” action=”#” method=”POST”> <button type=”submit” name=”Submit” value=”Submit” class=”theme_btn”>Send</button> </form>

Thank you. Sincerely, Sage

Hello, xxsagexx! Thanks for purchase!

To fix your problem just remove a paragraph wrapper from your form and add all of it’s attributes to form tag:

<form name="NAME" action="#" method="POST" class="fs_btn" data-position="480,0" data-in="bottom" data-step="0" data-delay="1000">
    <button type="submit" name="Submit" value="Submit" class="theme_btn">Send</button>

Hello! Thank you for your advice! The above worked great with the position! I had one additional question: the position is working now; however the “Send” button is cut in half on IE 10 and the text “Send” is very tiny on iPhone Safari. It looks good on both FF and Chrome. (the button in the “Get in Touch” section looks fine on IE and iPhone; and I would like the new Send button to look the same.). Would you be able to recommend a fix for the above? Thank you very much! Sincerely, Sage

Hi, xxsagexx! Please try following CSS code:

.fraction-slider .fs_obj .theme_btn{
    width: auto !important;
@media screen and (max-width: 767px) {
    .fraction-slider .fs_obj .theme_btn {
        font-size: 2em !important;

Hello I’m having problems in my portfolio.

When I put a photo in the portfolio, it does not automatically appear in the lightbox zoom.

And the button to close the lightbox is not working. Can you help me, please? Thank you!


Thanks for purchase!

1. To make your photo appear in the lightbox when you click on “picture” zoom icon, you need to create a link with class”prettyPhoto and add a “href” attribute to it that will follow on big image, like in following code:

<div class="portfolio_item_image">
        <img alt="" src="example/intro_img1.jpg" />
        <div class="portfolio_links">
              <a class="p-view prettyPhoto" title="" rel="prettyPhoto[pp_gal]" href="example/intro_img1.jpg"></a>
              <span class="heart">19</span>
              <a class="p-link" title="" href="./gallery-single.html"></a>
2. It seems, that there is a small bug in prettyPhoto gallery theme. To make a “close” button work, please open “main.css” file in any text editor, find this code:
div.facebook .pp_close
and add a new “z-index” CSS rule to this selector:
z-index: 3000;

Best regards!

Thank you very much! Everything is ok now.


FON Purchased

Hi there, cool theme :)

- How can I edit it?

Can I use any HTML Editor, including Adobe Muse and Bootstrap?


Hi, FON! Thanks for purchase! This is simple HTML template, so you can edit it in any HTML editor that you prefer.

Best regards!


FON Purchased

cool , thanks

Hi there, Really loving your template. Thank you :)

I want to show a different logo image in .navbar-brand for different media screens and when you scroll. I am attempting to do this in the main.css file with background-image:url(...) It seems like it will work, but is this the best way or is there a way to do it directly with html in the index.html file? Thanks,

Hello, emravensdale! Thanks for purchase! You can use a power of standard bootstrap functionality for your needs: http://getbootstrap.com/css/#responsive-utilities For example:

<a class="navbar-brand" href="#top">
    <img src="example/logo-xs.png" alt="" class="visible-xs" />
    <img src="example/logo-sm.png" alt="" class="visible-sm" />
    <img src="example/logo-md.png" alt="" class="visible-md" />
    <img src="example/logo-lg.png" alt="" class="visible-lg" />
Or you can use conversely “hidden-*” bootstrap utility classes.

Best regards!

Thank you very much. So Easy! This is my first exposure to Bootstrap. It seems like amazing functionality.

1 other question. I have figured out how to display the logo on tablet screens but it covers the menu – how do I push the menu to the left OR just show the drop down menu (like for mobiles). I have tried a few things but nothing quite worked;) Cheers

Please open “main.css” file and find following code:

@media (max-width: 991px){
 #mainmenu { float: none; text-align: center;}
and move “floan: none;” rule to this block of code:

@media (max-width: 767px) {
 #mainmenu {...}

amazing always;

hi would like to check how am i suppose to make the top navigation bar remain in height when i scroll down?

The top navigation bar reduce in height when i scroll.

Hello, edmund_gair! Thanks for purchase! You need to modify your “main.css” file. Find following code and comment it out:

.is-sticky .sf-menu > li > a {margin: 18px 0 18px;}
Maybe you’ll also need to comment out some CSS rules with ”.is-sticky” class for logo, etc.


When i add

read more

the word “more” cannot be click to download file while the word “read” works perfectly fine. Could i know why??

above the read and more can direct download but when i added in the area about us. The 3 section in modern,simple and flexible. The code cannot work.y?

Hi, Edmund! Sorry for delay. We not sure that we understand you right. As we see now, “read more” link works well in Chrome, Safari and IE. Even if delete “about us” section. What code exactly is not working?

I solved it already. Was a position issue in CSS. Thanks

Your template is very nice. when opened dimobile, no unusual appearance. I pay close attention turns when I scroll to the bottom of the slider, the display on the mobile so up and down. probably because in my opinion because the resolution of the image in the slider.

rsvd thanks ..

Hi, Nice template and got it working with my content, but having one problem: All icons and slider arrows are lost when I take it online. instead I get asian marks on chrome and empty boxes on a mac when testing. Any ideas what I have done wrong? Thanks

Hi, kerppu!
Thanks for purchase!
Those icons used our fonts. Make sure that you upload “fonts” folder.
If problem do not disappear, please provide a link to your site, we’ll try to help.

Ok, really embarrassing to admit this, but I had written the path to the Fonts folder wrong ( forgot the ../), well anyway: took a little break and found that, and now everything is looking just the way it should :) Sorry I bothered you for nothing, thank you for the speedy answer anyway, nice to know I would had had backup in case of emergency…

How can I make that when I Scroll Down the Page the Logo remains without getting smaller? Thanks in advance

Hi, alonsoruve!
Thanks for your question!
You need to modify your “main.css” file. Find this code: ”.is-sticky #header .navbar-brand” and remove “max-width: 150px;” CSS rule. You may also need to change “padding” rule to suit your design!
Best regards!

tanx for beautifull theme but when i install the theme my site appeare in a white page and show this error :
 Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) 
Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost/wordpress4/wp-admin/customize.php?theme=simpleflex

Hi, mostimax!
This is HTML template, not WordPress theme.

Hi, When viewed on an iPad the text and images in the top slider come on top of each other (specially badly since my language has quite long words…) How do I get the images to go under the titles the same way as they do in mobile view? Thanks

Hi, kerppu!
Thanks for purchase!
I guess, you need some CSS customization on iPad resolution – to do your text smaller on this resolution.
We can send you a CSS code, if you’ll give us a link to your site. You can send a link to us via contact form from our profile.

Hi – We purchased this template and have now gone live with our site – The problem is is that the site is NOT showing/displaying any of the text throughout the site on ANY Android devices which is pretty broad. I can have a guess that it’s the fade in animation part. So when ever the page is scrolled into view what is displayed ‘at that point’ in the browser should fade in but nothing at all is displaying. This is only an assumption.

URGENT! Can you please provide me and the community with some kind of Android fix ASAP please. This is a major issue with out client.

Thanks – JB

Hi, can you provide a link to your site?
You can do it via contact form from our profile!

Great – I have sent you the link :-)

Please check your email

Hi, I have purchased your template and have some trouble with your Google Map segment. It only works offline/local or online with Safari. Online it is not working with Firefox, Chrome or IE neither on Mac nor Win. For testing I uploaded your original files, same issue.

Can you halp, please?

Hi, KRquadrat!
Thanks for purchase!
Please check following link:
Google map should work on any web server – online and local.
Can you provide a link to your online site and we’ll investigate your problem?
Best regards!

I have checked your link, the preview is working also. But unfortunately it’s not working on my server after uploading. Could you please kindly mail me your email-address? I would prefer not to discuss the issue (and link to my page) in public. Thanks for that. Best Regards.

No problems!
Just send a message to us via contact form in our profile!


MJRamon Purchased

Hello and thank you for great template. I found slider customization confusing. How do I: 1. Make each slide’s intro animation much faster? 2. Make each slide (when already static) last longer? 3. Make slide’s “away” animation much faster? 4. Most important: make transition between slides faster? Now it is too long. Thank you.

Hi, MJRamon
Thanks for purchase!
Please open your “main.js” file in your favorite editor, find following code:

and add there following slider options:

    'timeout' : 8000, // timeout before switching slides
    'speedIn' : 500, // in - transition speed
    'speedOut' : 500, // out - transition speed
Play with this values to suit your needs.
Best regards!

MJRamon Purchased

Well, I didn’t notice until now. Take original download and open it in Internet Explorer 11.0.9600.17937 (Latest Windows 8 )

And you’ll get a broken web-site: https://gyazo.com/370e0970f4b785ccee29ef5b8c7e65e5

Menu is broken, can’t scroll down, menu links doesn’t work neither. This is fresh installation of HTML template v2.


MJRamon Purchased

Oh, I’ve profiled the page and found out, that I had “display intranet sites in Compatibility Mode” checkbox on. Turning it off helped.

Except “Get More Info” button: https://gyazo.com/bc3e2592cb188cee66b1722ff71b7b93

The same is on the demo page too.


MJRamon Purchased

Looks like I’ve fixed it with .slide .theme_btn { min-width: 100%; max-width: 100%; text-align:center; } Tested in Chrome, IE 11, Firefox


MJRamon Purchased



MJRamon Purchased

Seems like I went full blind mode and can’t find any example on formatting “table” content (with different colors of rows, captions etc). Is there any? If not, can you add it? Thank you.

Hi, MJRamon!
This template supports standard bootstrap tables:
Just add class “table” to your table element:

<table class="table">
Please visit following link for more info about bootstrap tables: http://getbootstrap.com/css/#tables
Do you need any additional styling for tables?