Add a Sticky Navigation to Your Website

  • Updated

Create a positive customer experience with a navigation that stays on screen while scrolling and always keeps your brand visible.

Here's how to add a Sticky Navigation to your DistributorCentral hosted website:
*Note: the Sticky Navigation is only available in with the Global Navbar on your website, regular Navbar blocks added to your website will not allow for Sticky Navigation*

  1. While logged into your DistributorCentral account, open the website editor. Learn How
  2. With the website editor open click Settings in the left side menu

    file-NbjNqrrVwY.png

  3. Under Settings, find the Global settings and click Edit Navbar

    file-EnOH7qIrLK.png

    The Edit Navbar screen will open:

    file-s1b0PRF8OY.png

  4. In the Edit Navbar screen select Use global navbar

    file-McMNx4QQfv.png

  5. Click Enable Global Navbar

    file-NRZQXJlgfe.png

  6. Next, select the type of Branding you would like to use on the navigation

    file-RzVYZb3TIB.png

    1. Use Text: Type a message in to display in the far left of your Global Navigation.
      (Select this and leave the field empty if you'd like to use no branding on the Global Navigation menu)
    2. Use Image: Upload you company's logo to display on the far right of your Global Navigation
  7. Select the style to use on the Global Navigation

    file-Dp4tL5NQBe.png

    1. Normal uses standard theme colors. *Recommended*
    2. Inverse uses an alternate color option and is typically darker. Not all themes support this type.
  8. Change the Layout field to Fixed. 
    (Fixed is the Sticky Navigation effect)

    file-KutpUx1MAv.png

  9.  After selecting a Fixed layout for your navigation, you can continue by adding links and other content to the navigation under Navbar Content
    1. Click the +Link button to add new links to your website
    2. Click the +Group button to add dropdown groups to add links to

      file-s1b0PRF8OY.png

  10. Click Done in the bottom right corner when you're done editing your Global Navigation

    file-Wbq8sWplEW.png

  11. Save Changes before closing or previewing your website

    file-VAtDnQ4z3Q.png

Thats it! Your website's navigation will stick to the top of the screen while scrolling through your website.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request