Create Better Divi Headers

New Product Release – DotNav Plugin Enhancing the Dot Navigation of Divi Theme

by | Jun 27, 2017 | 12 comments

Since I’ve published this post people keep asking me about how to add different functionality to the dot navigation of Divi. I am trying to help them as much as I can but not all the people understand CSS and JS and many times I find myself trying to explain the very basics of coding. This is absolutely normal, not everyone likes has enough time to dive into coding. So, to help this kind of people I decided to develope a simple plugin that would allow to customize the dot navigation without coding knowledge. This idea turned into a nice plugin – the DotNav plugin for Divi – and today I am glad to announce that it has been released.

The DotNav plugin adds lots of new options to Divi Theme Customizer which can be accessed by going to Divi -> Theme Customizer -> Divi DotNav . This plugin provides the following most requested features for Divi Dot Navigation:

– Enable/disable Dot Navigation on different devices. You can do this by simply checking the checkbox of specific device like you do it for Divi Page Builder modules (Desktop/Tablet/Phone).

– Exclude specific sections from the Dot Navigation. Some page layouts have lots of sections and it may not be neccessary to show dots for each of them in the Dot Navigation.

– Add dot labels. The DotNav plugin uses page section CSS ids for dot labels/tooltips. There are different label format choices available.

– Lots of styling options. The plugin has options to control colors, borders, paddings, margins, widths, ect. You can achieve really unique dot navigation designs using the DotNav plugin features. Watch the short preview video below about what designs can be achieved for Divi Dot Navigation.

Hope you’ll find this plugin useful, it is available for purchase under three different licensing options in our online store, for more details click here.

If you have any thoughts or suggestions please feel free to leave them in the comments section below.

View Live Demos & Get Divi MadMenu

    Download FREE Divi Sections

      12 Comments

      1. Arnaud Bertrand

        Hello,

        I’d like to be able to display the navigation on a cell phone, but obviously smaller than on a computer. Otherwise the navigation takes up the whole phone screen. Is it possible to customize the size of the dots, text, etc. to suit a phone?

        Thanks

        Reply
        • Ivan Chiurcci

          Hi Arnaud.

          Thanks for your question. I’m afraid Divi DotNav plugin does not provide responsive design options, the available design options apply to all devices. You’ll need to use custom CSS to apply different customizations for phone screens.

          Reply
      2. Zafer

        Hi…Your plugin looks great but before I buy I have a question…Can I apply the dots and the labels to multiple pages or it works only with the main (single) page…

        Reply
        • Ivan Chi

          Hi Zafer.

          The purpose of Divi Dot Navigation is to navigate through a single page, not the website. If you enable the dot navigation for a page, Divi generates it automatically creating a dot for each section on your page and the DotNav plugin allows you to customize it.

          Reply
      3. sarah merahba

        Hi Ivan,
        i really love the plugin, simple to use and allow real fancy customizations.
        I have one question tho:
        I would like to show my dots and labels on desktop only, but on mobile and tablet i would like to show only the dots and make the labels visible on click or for the active link.

        Is this acheivable?

        Reply
        • Ivan Chi

          Hi Sarah.
          Great to know you love the plugin :) The feature you are asking for is not available in the current version of the plugin, but I’ve added it to the list of upcoming features and will check if I can add it. Thanks for the suggestion.

          Reply
      4. David

        HI there,

        Just bought this and it is excellent. Have one feature request. I would like the dots to appear only after scrolling like the default behavior of the DIVI dots in the DIVI builder.

        Reply
        • Ivan Chi

          Hi David. Thank you for purchasing the DotNav plugin.
          This feature has been included in the features list and will be added soon, thanks for suggestion.

          Reply
      5. Patrick Riley

        Ivan, I’m using DotNav version 1.1.2 and having two issues:

        1) The chiddn_hide_section_dot isn’t working for me but not a big issue as I corrected it with my own “display: none” CSS.

        2) I’ve got “Show Labels” set to “Hover Only”. this work fine on desktop but not on mobile (I’m using both the Chrome and Firefox browsers on Android). I don’t have a workaround for this.

        Is there a newer version than 1.1.2 that addresses either of these? How do I get it?

        Reply
        • Ivan Chi

          Hi Patrick.
          Thanks for your comment.
          1) Please make sure you select and save the “Hide” option for SHOW/HIDE SECTION DOTS feature in DotNav -> Dot Settings after you add the chiddn_hide_section_dot CSS class to section(s), no need to use “display:none;” CSS.
          2) “Hover Only” means the labels will show up only on hovering over the dot with cursor but since you don’t have a cursor on mobile it will not work on mobile (this is true for any hover effect), it will work if you tap on dots.
          Hope this helps.

          Reply
      6. daehm

        This plugin looks very useful for long page.
        My question is,
        Does it work with EXTRA theme and divi builder?

        Reply
        • Ivan Chi

          Hi daehm,
          Thanks for asking. Current version (v1.0) of DotNav plugin works with Divi theme only.

          Reply

      Submit a Comment

      Your email address will not be published. Required fields are marked *

      Get FREE Divi Layouts

      Download 20+ Divi templates for FREE!

      Please confirm your email address to complete your subscription. Thank you!

      Copy link