Bottom Navigation Bar Section Layout
This documentation article is applicable to all Bottom Navigation Bar section layouts. The Bottom Navigation Bar 1 is taken as example.
1. How to Download
The Bottom Navigation Bar section layouts are available for annual and lifetime members. The members can download these layouts the same way as the other products - by logging into their account and clicking the download button on the shop page.
More details about downloading the products by members can be found in the Downloading the purchased product file(s) article.
2. Installation
After downloading the file of the layout first unzip it and find the JSON file inside. Import this JSON file into Divi Library in Divi->Divi Library->Import&Export.
After importing the section layout can be added to any page layout, ideally at the very buttom as a last section. You can choose to display this layout either on specific pages or globally throughout the site using the Divi Theme Builder.
The Bottom Navigation Bar is a self contained section layout, it is not necessary to add manually any custom CSS and/or JS to make it work because the layout already includes two Code modules, one with custom CSS and the other one with the custom JS. So, the Bottom Navigation Bar section is fully functional immediately after being added to the layout.
However, you will notice that there are two additional files inside the section layout .zip package: scripts-backup.js and style-backup.css files containg the custom JS and CSS accordingly. These files contain the same code as the Code modules in the section layout for backup purposes. Replace the code inside the Code modules with the code from the backup files in case it is corrupted and the section does not work as expected for some reason.
3. Structure
The Bottom Navigation Bar layout consits of a single section with rows for custom CSS&JS ( Navbar Code row), navigation items row (Navbar Items row) and the items content rows (Item 1 Content, Item 2 Content, etc.). The Bottom Navigation Bar 1 structure is as follows:
The section, rows and navbar items (which are Blurb modules) are assiged specific IDs and CSS classes.
Every item of the navigation bar is assosiated with its corresponding content row by assigning both the item(Blurb) and the row the same CSS class starting with " dvcsf_btm_navbar_item_". For example, Item 1 Blurb module and Item 1 Content row both are assigned the same dvcsf_btm_navbar_item_1 class.
All assigned IDs and CSS classes need to be preserved to ensure the correct functioning of the Bottom Navigation Bar.
4. Configuration
The Bottom Navigation Bar is fixed at the bottom of the screen and thus remains always in the viewport during the page scroll. But the site visitor may not always need it while viewing the page content and that's why a toggle is provided which allows the visitor to show/hide the navigation bar if necessary.
Also every content row has an 'X' icon at the top right corner for closing the row. For example, the Bottom Navigation Bar 1 looks like the following:
Both the navigation bar toggle and the content row 'X' icon can be enabled/disabled by configuring the custom JS. Open the navigation bar Code module containing the custom JS (labeled Code - JS) and set the following settings either to true(enable) or false(disable):
- addCloseIcon
- toggleNavbar
5. Customization
The Bottom Navigation Bar section can be customized/edited in the Divi Builder the same way as the other normal layouts, for example, the Bottom Navigation Bar 1 looks like this in the VB:
It might be a bit difficult to access the navigation bar items setting(Blurb module settings), in such a case consider switching to Wireframe mode.
To customize the navigation bar toggle and the content row 'X' icon the custom CSS needs to be edited(it is properly commented out to make editing easier). The custom CSS is located in the Code module labeled Code - CSS:
6. Troubleshooting
Sometimes when a layout is imported into the Divi Library the custom CSS and JS may get corrupted and the functionality is broken. If the section layout does not function properly after adding it to the layout then copy the JS code from the scripts-backup.js and CSS from the style-backup.css and add them into the Code - JS and Code - CSS modules accordingly.
The scripts-backup.js and the style-backup.css files are both located in the same .zip package as the section layout JSON file.