bluenotes supports this item


This author's response time can be up to 2 business days.

196 comments found.


whatsup Purchased

Plugin is compatible with Wordpress 4.7?

Hello, Yes it is.

Pre-Sales Question: With this plugin can I select individual posts from custom post types to only show content from, so If I have a CPT called articles can I select article 1 or multiples to show the flyouts? Thanks


Out of the box, the plugin allows you to select post and pages that you only want that particular flyout to be available on. If none are chosen then the flyout is shown on all available pages.

With that said, there is a filter available to extend the restriction option to include additional custom post types in the list such as your articles or say WooCommerce products, etc.

Hey bluenotes,

when i use the image option for the button trigger, it makes my small image 47×188 into a huge 1024×1024 image.

Why is flyouts adding dimensions to my image and how can I fix this?

Best regards, Tom

Can you check if you selected the original image in the Flyout trigger field. On the page source, it’s showing the image file name as: tokyo-flyout-sunday_001-1024×1024.png which would be a cropped image.

When I took the original sized image by not including “-1024×1024” at the end of the file name on my local setup, it worked as expected. See screenshot.

I selected the original image. But after saving the flyout, the image was changed and there is no more original sized image.

Can you please send a login for me and I’ll check. You can send it from my profile page.

Hi there, pre-purchase question here…

I know that your sliding panels are better but my client wants something like this.. plz check at the very bottom right.

Can i do that with your plugin? i want this exact presentation,

thank you, Kostas

You can do something similar. It won’t include the trigger or trigger label within it when it’s open as shown with the red arrow in your example. You’ll have to use CSS to size it as Flyouts on the bottom are 100% width.

Hello, I found there is an incompatibility with the latest visual composer plugin, have you found a solution to this?

What is the incompatibility that you are referring to?

Hi, sorry, it just doesnt work, I deinstalled all plugins, and started with bne, it works of course, then I activated visual composer 5.0.1 and its just does not work, but it does appear in the customizer screen on the admin side, could it be a jquery problem? thanks for the quick reply

You still need to give me more information. What does not work? Visual Composer or Flyouts? Are you trying to use visual composer in the flyout content editor? Is the issue occurring in the Flyout admin pages or other admin pages? Is there an PHP error, etc…

Hey mate, love the plugin. I am using it to Host an Essential Grid that comes in from the side, everything works perfectly apart from occasionally the grid in the panel will be far too small. like tiny.

I seem to be able to get it to do this if i open the page, go to another tab in my browser and then come back to open the side panel, itll be small then and to fix it i can go to another tab and come back and itll zip to fill the space.

Any ideas what might be causing it to go small?

Cool havent seen the issue since…will keep testing but looks fixed!

Glad to hear it. I know with Essential Grid you can’t have two of the same grids on the page but this one was weird to say the least.

Yeah seems to be chrome based only too, all other browsers seem to realise the space is bigger and expand to fill it pretty quickly.

Hello, I am very satisfied with this plugin, is it planned to add the ability to make the buttons disappear. thank you.

Hi there,

I’m glad you like the plugin. I’m not sure what you’re referring to. Are you asking if the trigger buttons are supposed to disappear when clicked to open a flyout or are you referring to something else?

Sorry for my English, I’m French. Yes that’s it, an option to make the buttons disappear, can also be add effects to the buttons. thank you.

The buttons already disappear when one is clicked or a flyout is opened. If you need them to disappear in other scenarios such as after scrolling from the top of the page – as an example, then you’ll need to write a custom js script to apply a style to them after a scrolling event.

Could you plugin accomplish this menu button:

If you’re referring to the button in the header then yes. You can either use the provided trigger from creating a Flyout and position it at the top or you can add the classname to an element provided by your theme’s header or custom element you add via HTML to open the corresponding Flyout.

If you’re referring to the contents of the hidden panel when clicked, then you’ll have to do some customizations here. Within the Flyout, you can set a background to the whole panel, not split it. The menu shown within it will be one column. You can see an example of this on the demo. Click the red button on the left to open an example menu used within a Flyout.

With that said, the contents of the Flyout can be anything you want. Therefore, you could create a custom menu and markup to output what you’re wanting to achieve and then use CSS to style it.

Pre sale questions, is plugin compatible with Enfold theme ?

I do not have a copy of the Enfold theme to give you a 100% answer. I haven’t received any issues about Enfold in the past so I’m assuming it’s fine. If you do happen to come across an issue, I will of course help to solve it.

I see in your Codecanyon Demo the Font and Fontsize are not the default ones I see on my site. Where and how can I change the Font and Fontsize on a button ? Is it inheriting it from the theme CSS? If so I need to somehow separate it to adjust it separately. It appears the button sizes itself to the length of the button text? Is it possible to set that separately? Thanks ~


The font size of the Flyout button inherits your theme’s body font size. You can adjust this with CSS.

.flyout-trigger.trigger-button { 
    font-size: 20px;

Thanks for the quick reply. That worked. And – font-family: “Times New Roman”, Times, serif; – changed the font family.


I’m using your plugin to display the articles sidebar in mobile, but I’m having trouble finding a way to make it appear only in posts and be hidden in all of the other kinds of pages/post types… do you think there’s a fairly easy way to implement this rule?

Thanks in advance!

The moment I asked, I thought of something that could work and it did :)

Thanks anyway!

Glad to hear it. There’s a few ways to do it. Either hide the button with CSS of course or use the bne_flyout_custom_restrictions filter to add your custom restrictions with any post type.


Pre-sale question: Can I have this plugin integrated with Woocommerce carts so that when customers add a product to their cart, an off canvas cart panel will appear?


Every flyout can be triggered using any element from your page such as links, images, shortcodes, etc by adding the trigger classname to it.


<a href="#" class="flyout-trigger-id-9">Click Me!</a>

In the case of a woocommerce add to cart button, you’ll have to alter the button html to include the flyout classname. Then you would have to make it not reload the page when clicked and instead just add to the cart using ajax, if it doesn’t already. With that said, I can’t say for sure if adding the flyout class to the button will in someway alter the behavior of the add to cart button with WooCommerce. I have not tried this so I can’t say it would work in either way.

Another option If it doesn’t work with the above, you could use JS to listen for the button when clicked and then open the flyout that has the cart. This basically does the same thing but doesn’t take over the behavior of the button — instead it’s an after process of the button being clicked. Still the action of the button would need to be ajax so that it doesn’t reload the page.

Hi, great plugin !!! Minor question: How to disable scrolling, when i use location “Top Side” ? Its possible ? Trough CSS ? (Classname: flyout-trigger-id-8506) – Purchased: Order #10164

Hi, problem solved. I used image on page as trigger (Click Me!)

Glad to hear you worked it out. Also, since you bought Flyouts directly from my website, please use the contact form there for support instead of at CodeCanyon so that I can verify the purchase.

Loving this plugin:-) With the flyouts (especially from the sides) is it possible to add a scrollbar when the content does not fit into the screen area ? It is responding to the up and down arrows but that is not obvious enough for visitors.

The area will scroll normally with a mouse, touch and keys. To restore the visual indicator of a scrollbar for webkit browsers (chrome and safari), you’ll need to remove the following CSS from bne-flyout.css starting on line 253.

.flyout-content::-webkit-scrollbar {
     display: none;

jikey Purchased

love this plugin … but recently it has crash on my site …

i have already on and off others plug in n update this bne fly out to latest 1 still not working fine.. sigh

Hello, by “crash” do you mean that it’s throwing the Flyouts to the bottom visibility on the site or something else?


jikey Purchased

oh yes.. when when i trigger it it wont show up also u can the contact button at the top menu …

Looking at the source, the Flyouts are being thrown outside the main wrapper and may be because of some rouge divs that are in their flyout content. Can you check those by switching to the text side of the editors and make sure there are no extra divs hanging around from your content.


oneseo Purchased

Hey so far this plugin is awesome one of the best flyout boxes I’ve used. i’m just having one issue. The Sub-menu dropdowns aren’t working on touchEvents on IOS mobile devices. It works fin on android and on ios desktop just not on ios mobile devices Any thoughts on what the issue might be or how to fix it? Thank you!

Does it work for you now? It’s working for me on my iPhone.


oneseo Purchased

That seems to have done it! Thank you!

You’re welcome.