How To Construct A Easy Navigation Menu With Divi 5 (Together with HTML Construction)

by DS | Feb 9, 2026 | Etcetera | 0 comments

End-Result-of-the-Simple-Navigation-Built-in-Divi-5-Showing-What-Modules-are-used-scaled-1

Divi’s Menu module handles many navigation needs, alternatively on occasion you want additional possible choices and keep an eye on. Custom designed header designs, unique hover effects, or specific semantic HTML must haves can push you previous what the Menu Module supplies. Divi 5‘s semantic parts and HTML wrappers help you assemble navigation from scratch the use of fundamental modules while outputting reputable, in the market HTML.

This instructional demonstrates learn to assemble a navigation menu the use of an Image Module for the brand, Text Modules for the text-based nav links, and a Button Module for a call to movement. The outcome’s a semantic

building with proper

portions that browsers, visual display unit readers, and search engines like google and yahoo interpret appropriately.
Table of Contents
Toggle
Why Assemble Custom designed Navigation?

The Menu Module works for out-of-the-box navigation, alternatively custom-built navigation supplies advantages specifically scenarios. The use of individual modules provides you with get right of entry to to their whole styling possible choices. You’ll have the ability to use CSS Grid or Flexbox to keep an eye on your own construction right through the navigation (instead of the Menu Module’s predefined construction). You’ll have the ability to moreover include a styled button as part of the navigation itself — semantically right through the
section where it belongs — reasonably than floating outside it.

Divi 5’s semantic section settings make this a viable and bonafide manner. You keep an eye on what HTML tags each and every module outputs, ensuring your custom navigation remains completely in the market and semantically correct.

The Function HTML Development

The first thing to be informed about semantic building is that there are reputable ways of doing it. Invalid ways of implementing semantic portions and context are steadily worse than not attempting them the least bit. So, previous to construction this in Divi, it’s helpful to seize the HTML building and regulations you’re in the hunt for to imitate. Right here’s a simplified exemplar:
```
 
 
 
 
 
 
 
 Space
 About
 Services and products and merchandise
 Contact
 
 
 
 CTA Button
 
 
 
```
We will be able to assemble this in Divi’s Theme Builder the use of a World Header. Doing this automatically assigns the
tag for you.

From there, all navigation portions go within a
landmark. You recognize {that a} part should be right through the Navigation tag if it has a link (so that contains the brand and button, in this case). The outer
- ): the brand, a nested document of nav links, and the CTA button. Show readers announce this as a navigation house, and the document semantics keep up a correspondence the relationship between menu items. We’ve got now a sub-list the use of each and every different
  for the text links, with each and every text link wrapped in a
  
  .
  Now, Divi modules have multiple layers. We will be able to on occasion change a Module’s HTML section immediately, alternatively other events we need to add a semantic layer above it, so we can moreover use the Previous to and After HTML possible choices. The use of both some of the ones possible choices found in Advanced > HTML will also be all we’d like for this easy navigation and menu to have proper semantic building.
  
  Step 1: Create the Container Development
  
  Open the Theme Builder and edit your World Header template. Another time, the Theme Builder automatically wraps header templates in a
  
  section, in order that you don’t need to worry about that section.
  
  Add the Segment
  
  There must be an empty Segment already inside the editor. This instructional will merely observe the bare minimum sorts.
  
  Set the Segment’s top and bottom padding to your preferred price — we’re the use of clamp(0.9rem, 0.8rem + 0.2vw, 1.1rem). Set the internet web page gutter the use of left and suitable padding with something like clamp(24px, 6vw, 90px). We’re the use of Design Variables for both a kind of.
  
  I will moreover add a background color.
  
  Add the Row
  
  Add a Row right through the Segment. This Row will later grow to be the
  
  section. Make a choice the single-column Flex Row.
  
  Add the Column
  
  When together with a Row, the main Column will always be populated. Since we had a single-column construction make a selection, that’s the one column we’d like.
  
  The Column will serve as the outer
  
  containing all navigation portions.
  
  Step 2: Add the Modules
  
  With the main packing containers in place, we now switch immediately to together with the modules that may form the navigation portions.
  
  Add the Logo (Image Module)
  
  Add an Image Module as the main section inside the Column.
  
  Upload or make a selection your brand image. Set the image’s Link URL to your homepage. This link is essential — without it, the brand won’t appropriately function as a navigation products.
  
  Add the Text Links (Body of workers Module with Text Modules)
  
  Add a Workforce Module after the Image right through the Column. The Body of workers serves dual purposes: it visually groups the nav links and will later output the nested
  
  building.
  
  All the way through the Body of workers, add 4 Text Modules—one for each and every text navigation link. In each and every Text Module’s content material subject matter field, add the link text and set the hyperlink inside the Rich Text editor (Ctrl + Ok). Don’t use the module’s Link selection crew; the anchor should be right through the text content material subject matter for proper semantic output.
  
  Give each and every a novel text and link as you notice fit.
  
  Add the CTA Button
  
  The last thing to be able to upload is a Button module right through the Column after the Body of workers.
  
  Set the Button Text and Button Link URL. You’ll have the ability to moreover add any button sorts you favor.
  
  Step 3: Configure Construction Settings
  
  Now that all our building and inside modules are in place, we need to control some Flexbox settings to organize them horizontally.
  
  Column Construction
  
  Make a choice the Column and open the Design tab. Underneath Construction, set Construction Trail to Row (horizontal) and set Justify Content material subject matter to Space Between for logo-left, nav-center, button-right distribution. Moreover set Align Items to Middle.
  
  Body of workers Construction
  
  Make a choice the Body of workers Module and open the Design tab > Construction. Set Construction Trail to Row. Set Justify Content material subject matter to Space Spherical and use an not obligatory custom hollow price for consistent spacing between nav links.
  
  Step 4: Set Semantic Portions
  
  The design and construction can in reality be regardless of you want them to be. Then again now shifting into Semantic building, we’ll turn out to be generic
  
  portions into reputable navigation HTML.
  
  If you happen to add any or rearrange the elements, the fitting steps below might need to be tweaked. Then again assuming you may well be somewhat when it comes to the development outlined above, the steps below offers you a fully reputable implementation.
  
  Row: Set to nav
  
  Make a choice the Row. Open the Advanced tab. To seek out the HTML selection crew and the Section Type dropdown. Change it from the default to
  
  . The Row now outputs as
  
  instead of
  
  .
  
  Column: Set to ul
  
  Make a choice the Column. Inside the Advanced tab > HTML selection crew, set Section Type to
  
  . The Column becomes the outer unordered document containing all navigation items.
  
  It is usually completely reputable to use the
  
  Section type in this context if you want. This is a unusual case where the ones two portions are semantically interchangeable in this context.
  
  Image Module: Set to li
  
  Make a choice the Image Module. Inside the Advanced tab, set Section Type to
  
  . The brand becomes a listing products right through the navigation document. Take into account that the image/brand correct right here should have a link.
  
  Body of workers Module: Set to ul with li Wrapper
  
  The Body of workers Module calls for 2 semantic adjustments. First, inside the Advanced tab, to search out HTML Previous to and enter
  
  . To seek out HTML After and enter
  
  . This wraps the entire Body of workers in a listing products section. This promises the mum or father
  
  (the Column) maintains a legitimate HTML building with all of its direct youngsters (which must be
  
  ).
  
  Next, set the Section Type to <ul> — this makes the Body of workers output as a nested unordered document. This is important when we succeed in the Text Modules right through the Body of workers.
  
  Important Realize: Earlier, we mentioned that
  and
  
  are interchangeable. That is, in reality, true with the top-most
  
  or
  
  . However, given that Body of workers Module is already nested within a
  
  /
  , we can’t use
  correct right here and must use
  
  .
  
  Text Modules: Set to li
  
  Make a choice each and every Text module right through the Body of workers. Set Section Type to
  
  for all 4. Each nav link becomes a listing products right through the nested document.
  
  And because we added links to the text of each and every inside the module’s Rich Text editor, moreover they’ve the essential tags.
  
  Button Module: Set to a with li Wrapper
  
  Make a choice the Button Module next. Divi automatically assigned the button an Section Type of , and we wish to keep this. However, we need to add
  
  to HTML Previous to and
  
  to HTML After.
  
  The button becomes a listing products containing an anchor tag, matching the development of other navigation portions.
  
  Step 5: Configure Spacing
  
  You probably see some document dots and off-center spacing. That is on account of, when introducing a number of the ones HTML portions, we will have added undesired spacing to the construction. Specifically, lists steadily observe default styling that we’ll counteract now.
  
  The packing containers correct right here show some added spacing, while the arrows show document bullet problems
  
  You’ll have the ability to turn on X-Ray Mode to get some way of some of the added spacing.
  
  Column Spacing
  
  Make a choice the
  
  Column. Inside the Design tab beneath Spacing, set Padding Bottom to 0px.
  
  Body of workers Spacing
  
  Make a choice the Body of workers Module on account of we need to do the identical issue. Set Padding Bottom to 0px.
  
  Step 6: Add CSS Reset
  
  Having addressed the unwanted spacing, we can now in short deal with the unwanted bullet problems inside the document portions. Make a choice the Row and open the Advanced tab > CSS. Inside the Loose-Form CSS field, add this CSS:
  
  nav ul, nav ul li, nav ul li ul, nav ul li ul li { list-style: none; } .et-l--header nav ul { padding: 0; list-style: none; }
  
  The principle part of this CSS eliminates document bullets from all document portions right through the navigation. The second segment eliminates the overall little little bit of
  
  spacing that isn’t merely in the market in Divi’s spacing possible choices.
  
  At this degree, you’ll turn off X-Ray Mode on account of our spacing is mounted.
  
  Final Consequence
  
  Save, then go to the doorway end of your internet web page to view the header. The visual finish end result fits an abnormal navigation construction: brand on the left, nav links inside the center, CTA button on the suitable. The underlying HTML, on the other hand, is now semantically correct.
  
  Investigate cross-check the section inside the browser developer tools to look the development:
  
  If you happen to deviated from the development and module makeup that we used in this instructional, that is totally good enough. However, the fitting method you want to make use of the nav, ul, li, and a tags might vary reasonably. This may also be tricky on account of few persons are professionals in semantic building.
  
  What I’ve came upon helpful is copying the HTML of my header from my Browser’s DevTools and supplying it to my AI of variety.
  
  From there, ask whether or not or now not the semantic building is reputable and what needs to modify to make it reputable. You’ll have the ability to even give the AI the URL of this blog post so it’ll most likely be informed up on some Divi 5 context and provide upper instructions to help you succeed in your desired end finish end result.
  
  Get began Construction In Divi 5 In recent times!
  
  Divi 5‘s semantic section controls unlock development methods that previous permutations of Divi couldn’t support. Construction navigation from atomized modules is now possible, and with it, the assigning of semantic portions.
  
  The Section Type setting, mixed with HTML Previous to and HTML After fields, provides the keep an eye on essential to output reputable HTML5 structures from any module mixture. Construction a navigation is one application — the identical manner applies to construction custom footers, sidebars, article layouts, and any part requiring specific semantic markup.
  
  Divi consumers now have the tools to build in the market, semantic HTML without leaving at the back of the Visible Builder workflow. The space between “what Divi outputs” and “what reputable HTML requires” has closed.
  
  Obtain Divi 5 Be told Extra About Divi 5
  
  The post How To Construct A Easy Navigation Menu With Divi 5 (Together with HTML Construction) appeared first on Chic Subject matters Weblog.
  
  WordPress Web Design
  
  [ continue ]