Divi Tips 12

The Navigation tab of Divi theme options

Updated on 22/08/19

884 words

3 reading minutes
45 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

Let's see in detail what it is possible to set in The Navigation tab Divi theme options.

Know that there are no "good or bad settings", all this is subjective and will vary according to your web projects and the purpose you want to achieve...

The options you define in this tab may influence the behavior of your main menu. See you here on the full folder dedicated to the main navigation of Divi.

Navigation tab
Navigation tab

Option screen "Navigation" is composed of 3 sub-tabs: "Pages", "Categories" and "General Settings".

Here is the program of this article:

  1. The Navigation sub-tab > Pages
  2. The Navigation sub-tab > Categories
  3. The Navigation sub-tab > General Settings
  4. Other options for Divi
Navigation > Pages
Navigation tab > Pages
  1. Exclusion of pages: I don't know if this option is interesting since to organize its browsing, it is better go through the options than WordPress offer from the tab Appearance > Menu. See here for more information how to create a main WordPress menu.
  2. Drop-down menus: If this option is disabled, subpages contained in your main navigation will not be active. Only first level pages will be taken into account.
  3. Welcome link: this option adds a link to your home page, however, if you set your home page in the tab Appearance > Customize > Static Home Page, it will create a duplicate.
  4. Classification of links: This allows you to configure the sorting organization of links contained in your main navigation. I say again, it has no value if you set your menu from the tab Appearance > Menu.
  5. Order of classification: Idem than for links rankings, it is better to go through the tab Appearance > Menu proposed natively by WordPress.
  6. Number of levels in drop-down menus: These are the levels equivalent to the depth of a menu. It all depends on how many sub-elements you need in your main menu.
  7. Save: Of course, once you have made your changes, remember to save them.

Also read: How to insert images in the Divi menu?

Now let's see in more detail the sub-tab "Categories" available from the "Navigation" tab...

Divi Theme Options: navigation tab - 2
Navigation tab > Categories
  1. Exclusion of categories: Like pages, it is possible to exclude categories in the main navigation. This is where you can check or uncheck them. However, it may be more relevant to do this from the tab Appearance > Menu proposed natively by WordPress.
  2. Drop-down menus: If your blog has child categories and you want them to appear automatically, you can activate this option.
  3. Empty Categories: you can display, in the main navigation of your site, all existing categories. By default, categories that do not contain any items will be hidden. If you still want to display them, you can disable this option.
  4. Dropdown menu levels: Just like the drop-down menus of the pages, you can decide the depth of the drop-down menu of your categories. This will depend on your internal organization regarding parent and child categories.
  5. Sort Links: you can filter the ranking of links in your category navigation
  6. Order of classification: as you can classify them according to an ascending or descending sorting.
  7. Save: Don't forget to save your changes.

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

So far, the last two tabs did not have much added value, but the options available since Sub-Tab "General Parameter" are rather important...

Divi Theme Options: navigation tab - 3
  1. Disable the upper level: When the option is disabled, the primary elements of your navigation will be clickable. If you want the primary element, containing menu sub-elements, not to be clicked, enable this option. For example, on this blog, Astuces Divi, you can click on the item named « ALL FOR DIVI" . This primary element is clickable because the option is disabled. If I had wanted the item "ALL FOR DIVI" not to be accessible, then I would have activated this option.
  2. Alternative scrolling method: When you create a scroll navigation, i.e. by SCROLL, you add a CSS ID to access this part of the screen. However, the title may sometimes be cut. By activating this option, it corrects the problem. For Full of tricks about the scroll, go here.
  3. Save: Always the same, remember to save...

To go further, I suggest you navigate in the other articles in this series:

navigation tab divi

Divi training via CPF

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256
Discover my wpLingua plugin, which makes your websites multilingual in just a few clicks! SEO-Friendly / Automatic / Editable

Your comments...

45 Commentaires

  1. PEREZ SERON

    Bonjour,
    Je fais un site avec divi.
    Je voudrais bloquer ma barre latérale comme la votre.
    Que dois je faire pour Ă©viter qu’au dĂ©filement les Ă©lĂ©ments restent en haut de ma page?

    Merci

  2. Sev

    Bonjour,
    Mon menu dĂ©roulant du menu principal se dĂ©roule mais je ne peux pas accĂ©der aux premiers articles du blog qui se situent en bas du menu dĂ©roulant… Je ne m’en Ă©tais pas aperçue tant que je travaillais sur un grand Ă©cran, mais je constate le problĂšme sur un portable. En revanche, la navigation dans le menu s’effectue trĂšs bien sur une tablette ou un smartphone. Je n’arrive pas Ă  comprendre d’oĂč vient ce souci. Auriez-vous une explication ? Serait-ce dĂ» Ă  l’absence d’ID CSS pour permettre la navigation par SCROLL ? Auquel cas, comment devrait se prĂ©senter cet ID CSS ?
    Merci beaucoup

  3. Lycia

    Bonjour Sev, vous avez le lien du site ?

  4. Lycia

    C’est parce que tu as trop d’élĂ©ments qui compose ton menu

  5. Lycia

    Ce sont des articles que tu as ajouté au menu ?

  6. Sev

    Oui tout à fait, ils sont ajoutés au menu.
    N’y a-t-il pas moyen d’avoir un menu dĂ©roulant aussi long que l’on souhaite ? Suis-je obligĂ©e de crĂ©er des catĂ©gories et par lĂ -mĂȘme des sous-menus ?
    Je suis surprise qu’un menu dĂ©roulant ne puisse ĂȘtre dĂ©roulĂ©…

  7. Lycia

    Vous pouvez avoir un menu long, puisque si on le « rĂ©-enroule » votre problĂšme n’existe plus. On voit bien votre contenu Ă  ce moment-lĂ . Je pense qu’il vaut mieux mettre une page de catĂ©gorie. Quand l’utilisateur clique dessus, il arrive Ă  la liste des articles. Sur Astucesdivi, il y a 1 Ă©lĂ©ment avec 4 sous Ă©lĂ©ments. Chacun d’entre eux vous mĂšne Ă  la liste des articles de la catĂ©gorie. C’est peut-ĂȘtre plus facile pour l’utilisateur ?

  8. Sev

    RĂ©-enroule ? Je ne comprends pas. Si je scroll dans un sens ou dans l’autre je ne vois pas les articles en bas du menu (sur un Ă©cran 13″).
    Je préfÚrerais que tous les articles du blog soient visibles dans ce seul menu.
    Ex. : dans le site ci-dessous (sĂ©lectionnĂ© Ă  l’instant par hasard), le menu « Tous nos rayons » nĂ©cessite un scroll et ne gĂšne pas l’utilisateur qui comprend immĂ©diatement l’action Ă  faire pour accĂ©der Ă  la suite du menu. Est-ce possible avec Divi ?
    https://www.darty.com/nav/achat/encastrable/grand_refrigerateur/refrigerateur_americain/samsung_rs66n8100s9_ef.html

  9. Lycia

    En fait, quand tu appuie pour dĂ©rouler le menu , tu peux reappuyer pour le fermer. (J’ai testĂ© avec mon iPhone)

  10. Sev

    Merci Lycia. En fait mon problĂšme est visible sur un Ă©cran d’ordinateur portable en particulier. Sur tablette ou smartphone, oĂč il est possible de faire glisser le menu de maniĂšre tactile, on peut lire l’intĂ©gralitĂ© du menu. Avec une souris devant un Ă©cran par contre on s’arrĂȘte, selon la taille de l’Ă©cran, avant la fin du menu.

  11. Lycia

    On peut corriger ça avec du CSS simplement

  12. Sev

    Oui, c’est ce que je subodorais aprĂšs la lecture de la note 2 sur la mĂ©thode alternative de dĂ©filement, d’oĂč ma question dans mon 1er commentaire Ă  propos de l’absence d’ID CSS pour permettre la navigation par SCROLL. Mais oĂč dois-je dĂ©finir cet ID CSS ? Dans la personnalisation des CSS de l’onglet « GĂ©nĂ©ral » ? Et quels attributs lui donner ?

  13. Lycia

    Non je pense plutĂŽt Ă  du Media Queries. Je regarderai la semaine prochaine

  14. Sev

    Merci Beaucoup Lycia. Je ne connais pas ces Media Queries…

  15. nol

    Bonjour,
    J’ai crĂ©er un menu mais impossible de la voir dans mes pages
    Comment faire pour qu’elle apparaisse ?

  16. Lycia

    Bonjour Nol,
    Une fois votre menu créé, vous devez lui affecter un emplacement via Apparence > Menus > gérer les emplacements

  17. Nelly

    Bonsoir Lycia,
    Je bloque vraiment sur un point, je suis crĂ©atrice de faire-part mariage, j’ai donc crĂ©e ma page catĂ©gorie faire-part mariage ou tous mes modĂšles seront affichĂ©s, j’ai donc ajoutĂ© une ligne avec Ă  droite le module boutique et Ă  gauche barre latĂ©rale.

    J’ai bien ajoutĂ©s les attributs aux modĂšles, Ă©galement « rĂ©glé » la barre latĂ©rale dans apparence widget, mais quand j’actualise, l’onglet barre latĂ©rale reste vide…

    Auriez-vous une idée du problÚme ?

    DeuxiĂšme question,
    Suite Ă  une grosse erreur de parcours, j’ai voulu crĂ©e un site sous wix…
    Je me suis vite rendue compte de la grosse erreur que je faisais, du coup je suis en train de crée et de remplacer ce site sous wordpress,
    j’ai peur de crĂ©e un duplicate content puisque mes pages sont en ligne, mais sous un nom de domaine de remplacement qu’ovh m’a fourni en attendant de terminĂ© celui-ci.

    Y’a t’il une possibilitĂ© pour crĂ©er un site sous wordpress, mais non visible et hors ligne ?

    Excusez-moi pour toutes ces questions, mais je suis vraiment perdu, et comme je retrouve Ă©normĂ©ment de rĂ©ponses Ă  mes questions sur votre site, je me permets donc de vous contacter aujourd’hui ….

    Merci pour votre retour
    Belle journée à vous

  18. Chilli

    Bonjour,
    savez-vous comment on dĂ©sactive l’affichage du menu dĂ©roulant lorsque l’on scroll ? lorsque l’on scroll le menu disparait correctement mais si nous avons le malheur de passer la souris en haut de la page, la couleur de fond du menu dĂ©roulant et la couleur de la ligne s’affichent…
    Merci par avance de votre aide.

  19. Lycia Diaz

    Hello Julie, je n’arrive pas trop Ă  comprendre votre besoin. Vous avez un lien ?

  20. Lycia Diaz

    Hello Nelly !
    Effectivement, il pourrait y avoir du duplicate content. Je vous conseille d’installer un plugin de maintenance dans les plus brefs dĂ©lais. Celui-ci par exemple pourrait faire l’affaire : https://fr.wordpress.org/plugins/wp-maintenance/ ainsi Google n’aurait pas accĂšs Ă  votre site le temps de sa conception. Une fois que tout est rappatriĂ©, supprimez le site sous Wix et dĂ©sactivez la maintenance du nouveau site. Pour votre problĂšme de barre latĂ©rale, il restera vide jusqu’Ă  ce que vos articles soient publiĂ©s. Le sont-ils ? S’ils sont en brouillon, WordPress reconnait que la catĂ©gorie est vide et, de ce fait, n’affiche rien.

  21. Stéphane

    Bonjour,

    J’ utilise divi pour crĂ©er un site, seulement j’ai un problĂšme avec la barre de menu que je ne parviens pas Ă  configurer comme je le souhaite…

    Dans ma configuration actuelle la barre n’apparaĂźt que lorsque l’on fait dĂ©filer la page de haut en bas. Et lorsque je sĂ©lectionne et que je dĂ©sactive « barre de navigation fixe » dans option du thĂšme divi « gĂ©nĂ©ral » celle ci devient fixe et reste en haut de page.

    J’avoue ne plus trop savoir de quelle façon configurer la barre de menu en optant pour l’option via DIVI ou apparence personnaliser « propre Ă  wordpress » tout ce que je souhaiterai est de pouvoir afficher sur mon site un menu comme le votre… fixe et qui reste en place lorsque l’on fait dĂ©filer l’Ă©cran.

    Par avance, merci pour les conseils que vous me communiquerez…

    Cordialement

    Stéphane

  22. Lycia Diaz

    Bonjour StĂ©phane. Le menu se rĂšgle dans Apparence > PersonnalisĂ© > En-tĂȘte et navigation. Si vous voulez un menu comme sur ce blog, j’ai choisi l’option Style d’en-tĂȘte : « DĂ©faut ». Et je n’ai pas cochĂ© les deux options de dessous. Le menu reste donc fixe. Est-ce que cela rĂ©pond Ă  votre question ?

  23. coralie

    bonjour,

    je me demande si je peux modifier l’apparence du menu dĂ©roulant; En effet, le menu se dĂ©roule en colonne alors que je souhaiterai qu’il face toute la largeur de ma page comme ma barre de navigation et donc avoir mes onglets rangĂ©s horizontalement.

    Merci d’avance

    Cordialement

    Coralie

  24. rani

    Bonsoir et merci pour toutes ces infos :
    Sur mon site, j’ai un sous menu dĂ©roulant et j’aimerais que celui-ci disparaisse lorsque je clic sur l’un des items du sous-menu (sur ecran ordi).
    J’ai beaucoup cherchĂ© et je n’arrive pas Ă  trouver la solution. Un peu comme ce qui se passe lorsque l’on clique sur l’un des item du sous menu tout pour divi…le sous-menu disparait 😉
    Merci pour votre aide 🙂

  25. Lycia Diaz

    Salut Rani, je ne vois pas trop ce que tu veux dire ?

  26. Rani

    Bonjour Lycia, tout d’abord, je tiens Ă  vous remercier pour votre site qui m’a beaucoup aidĂ© Ă  rĂ©aliser mon site vitrine 😉…sur mon site accessible Ă  l’adresse http://www.neo-dpo.fr ….j’ai un item services dans mon menu qui est un sous menu dĂ©roulant…lorsque je clique sur l’un des items du sous menu…j’accĂšde Ă  la section dĂ©sirĂ©e de la page d’accueil…mais la fenĂȘtre du sous menu est toujours apparente, Ă  moins que je dĂ©place le pointeur de la souris en dehors de la fenĂȘtre….ce que je voudrais, c’est que dĂšs que l’on clique sur l’un des items, la fenĂȘtre du sous menu se ferme automatiquement….😉

  27. Lycia Diaz

    Salut Rani, c’est bien bizarre ça. En effet, ton menu reste ouvert et je ne vois pas comment c’est possible. En plus, on dirait que le clic-droit est dĂ©sactivĂ© donc je ne peux mĂȘme pas inspecter le code…

  28. Rani

    Lycia, je vais dĂ©sactiver le plugin de protection clic droit si ça peut vous aider Ă  identifier une solution, merci en tous cas pour votre aide 😉

  29. rani

    Bonjour Lycia, pour info je viens de dĂ©sactiver le plugin protection clic droit 😉

  30. Lycia Diaz

    Salut Rani,
    J’ai regardĂ© le code mais je ne vois rien de spĂ©cial.
    Comment as-tu obtenu ce style de menu ? Je crois que la solution est lĂ … Car ce style de menu n’est pas classique, ou je me trompe ? Tu as ajoutĂ© du code ? Si oui, le soucis vient peut-ĂȘtre de lĂ  ?
    Sinon, je vois que certains liens de menu sont des ancres et j’ai l’impression que ça bloque la fermeture du menu mobile, il faut voir d’oĂč ça vient car quand on change de page, le menu se ferme bien…
    JE ne peux pas plus t’aider mais je serai curieuse de connaitre la suite, tu nous tiens au courant ?

  31. rani

    Bonjour Lycia, merci pour votre retour.

    En ce qui concerne le format de l’entĂȘte, j’utilise le style par dĂ©faut de DIVI.
    Pour l’animation du menu dĂ©roulant, j’ai choisi l’option « fondu » dans DIVI.
    C’est donc bien un menu classique de DIVI, je n’ai pas jouer de code particulier.

    Sur mobile, j’ai juste activer l’option « Collapse submenu items in the mobile menu » du plugin DIVI SWITCH.

    Je pense que le fait que les items du sous menu redirige vers une section de la mĂȘme page d’accueil Ă  une incidence en effet. Car comme vous le dite, la fenĂȘtre du menu dĂ©roulant se ferme bien automatiquement lorsqu’il y a une redirection vers une nouvelle page.

    Il doit certainement exister une commande qui puisse permette de rĂ©soudre çà
.je vais continuer mes recherches de mon cotĂ© et vous tiendrais informĂ© avec plaisir 🙂

  32. Lycia Diaz

    Salut Rani, le souci pourrait venir de Divi Switch.

  33. Aurélie

    DĂ©sactiver le niveau supĂ©rieur : bonjour Lycia, lorsque je clique sur mon menu sur PC, la page « prestation » par exemple s’ouvre, mon Ă©lĂ©ment est cliquable, mais il ne l’est pas sur mobile. Je ne comprends pas pourquoi. Aurais – tu une idĂ©e pour me venir en aide ?

  34. Lycia Diaz

    Salut AurĂ©lie, non c’est bizarre. S’il est cliquable, il devrait l’ĂȘtre partout… Jamais vu ça.

  35. LEVERRIER Aurélie

    Bon, merci quand mĂȘme ! j’ai contournĂ© le problĂšme en attendant ! Merci de ta rĂ©ponse rapide !

  36. Ludo

    Bonjour Lycia (et Aurélie),

    je rencontre le mĂȘme problĂšme qu’AurĂ©lie, dans la version mobile le niveau supĂ©rieur de mon menu dĂ©roulant n’est Ă©tonnamment pas cliquable et je ne trouve pas de rĂ©solution.
    Une nouvelle piste pour résoudre ce problÚme est-elle apparue depuis tout ce temps ?

    Merci par avance de votre aide.

  37. Lycia Diaz

    Il y a peut-ĂȘtre un conflit avec un autre plugin ?

  38. Ludo

    Merci Lycia pour ton retour rapide.
    J’aurai dĂ» prĂ©ciser que j’avais bien entendu testĂ© la dĂ©sactivation des plugins pour identifier un Ă©ventuel conflit. MĂȘme sans aucun plugin activĂ© le problĂšme demeure. Idem pour les personnalisations de CSS qui auraient pu poser un problĂšme. Et cĂŽtĂ© menu, une configuration des plus classiques.

  39. Lycia Diaz

    Ah 
 dĂ©solĂ©e je vois pas. Comme ça c’est difficile d’identifier le problĂšme

  40. Aurélie

    Bonjour Ludo et Lycia
    Non, je n’ai toujours pas trouvĂ© la solution. C’est vraiment bizarre je travaille toujours sur divi, je n’ai jamais rencontrĂ© ce problĂšme sur d’autres sites.

  41. Digiaud

    Bonjour
    J’ai utilisĂ© le thĂšme builder pour construire mon header global.
    J’ai créé mon menu dans apparence > menu.
    Cependant mon menu dĂ©roulant ne s’affiche pas. Il n’y a que le premier niveau qui s’affiche et lorsque je clique dessus les sous Ă©lĂ©ments ne s’affiche pas ! Avez vous une idĂ©e ?
    Merci

  42. Lycia Diaz

    Non je vois pas d’oĂč ça pourrait venir

Trackbacks/Pingbacks

  1. How to set the CREATORS, LAYOUTS and ADS tabs of the Divi theme? - [...] set the Navigation tab of the Divi theme [...]
  2. The options of the WordPress theme Divi: focus on the tab "general" - [...] set the tab Navigation of the theme Divi [...]

Submit a comment

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