Pip Navigation

Thunder Pack addon stack

Add a unique little navigation that is manually curated and customizable. The Pip Navigation stack can even be used as an anchor navigation for traversing long pages of content.

  • Creates a unique pop-up navigation.
  • Maually currated.
  • Choose the direction the pop-up navigation will appear.
  • Supports Foundry's Tooltip feature.
  • Choose custom icon for trigger.
  • Style the navigation trigger to match your site.
  • Create a normal or anchor base navigation with Pip.
  • Place the navigation trigger normally or have it fixed in place along the left, right, top or bottom side of the browser window.

Example

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Using Pip Navigation

Toggle

Fixed Position Toggle
Enabling this feature allows you to position the toggle for the Pip Navigation along the edge of the browser window. When enabled you can choose to place it along the left, right, top or bottom edge of the browser.

Alignment
When not using the Fixed Position option you can choose to align the Pip Navigation toggle to the left, center or right in its current parent stack.

Toggle Style
Choose between using a solid color or a gradient for the toggle’s background. You’ll be presented with the appropriate color pickers depending upon your choice. You’ll have color picker for its normal, hover and active state. The Hover state is for when the visitor hovers over the toggle while the Active state occurs as the visitor is clicking the toggle.

Icon
Choose which icon you’d like on your toggle from a large list of icons.

Toggle Button Shadow
Decide whether you’d like your toggle to have a drop shadow. When enabled you are give controls for the shadow’s size and offsets at each breakpoint. You are also presented with color pickers for the normal, hover and active states. As an alternative you can opt to have an inset shadow which makes the toggle appear to be inset into the page.

Pop Up

Position
Determines which direction you’d like the pop up to appear in relation to the toggle.

Background
Allows you to choose the background color for the pop-up.

Links
Set the normal and hover color for the links contained within the pop-up.

Links Background
Sets the background color for the links when hovered over.

Advanced

Tooltip
Add a popup tooltip to your toggle. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!