Full Screen Menu Pinegrow Plugin

Easy Mobile Hamburger Menus for Pinegrow

This Fullscreen Hamburger navbar plugin for Pinegrow lets you easily add a hamburger menu to any project you are working on.

Simple to use: Loads as a plugin into any project. Add 6 kinds of open animation effects with one click.

Plugin Features

 

  1. Adds Options to the prop panel
  2. Very Easy to use
  3. No coding required. Just drop the menu in to your project. Then just select the element and select the option from the drop down from prop panel .
  4. Pure CSS
  5. No JavaScript
  6. Responsive
  7. 6 animation effects
  8. 3 hamburger  styles
  9. Select background colors from the prop panel.

6 Full Screen open Animations

Choose from 6 types of open effects with a single click – Slide down, slide up, left slide In, right slide in, sliding door, and fade in.

3 menu Styles

Choose from 3 hamburger styles with just one click – round hamburger, square hamburger, and borderless hamburger.

Easily set menu postition

Set the menu where you want it to appear with menu with just a click- Top Right, Top Left, Bottom Right or Bottom Left

View A live Demo

Buy Now

Add stunning full screen menus with just a cfew clicks in Pinegrow

How to Use

See how easy it is add a full screen menu in Pinegrow with just a few clicks

HOW TO INSTALL

  1. Download Zip
  2. Unzip to somewhere such as – C:\Program Files (x86)\Pinegrow Web Designer\frameworks
  3. Open Pinegrow
  4. Open your project or start a new one
  5. Click manage libraries and plugins
  6. Click load plugin
  7. Open pg.fs-navabar.js (inside fs-navbar folder)
  8. Add and Activate fs-navbar.js
  9. A pop  up will appear. Add the resources to the page or project
  10. FS Navar will now appear in the lib panel
  11. FS Navar Options will now appear in the Prop panel. You just need to select the correct selector in the section fs-navbar-1-1.
  12. Follow The instructions below to use. Its easy!

CHANGING THE POSITION OF THE NAVBAR

  1.  Select the span class  – fs-navbar-icon – Below Form Label
  2. In the prop panel you will see FS Navbar Options/ fs navbar
  3. From dropdown in option Navbar Postition, select the position you want

CHANGING THE ICON STYLE

  1. Select the span class  – fs-navbar-icon – Below Form Label
  2. In the prop panel you will see FS Navbar Options/ fs navbar
  3. Choose a style from the option Navbar Icon

CHANGING THE MENU OPEN EFFECT

  1. Select the header class  – fs-navbar
  2. In the prop panel you will see FS Navbar Options/ fs navbar
  3. Choose an effect from the dropdown from the option Navbar Open Effect
  4. You can also select background color from Background Color option

KEY SELECTORS 

.fs-navbar-icon

.fs-navbar

START ADDing Full Screen Menus