Watch this video
Divi Mobile provides a sleek bottom navigation system for your mobile site, offering a contemporary and accessible way to guide your users through your website content.
How to Set Up Bottom Navigation
You can either use a secondary menu as the bottom navigation or move the primary menu to the bottom navigation area.
You should have a separate WordPress menu to use in the Bottom navigation.
To enable and configure the bottom navigation feature in Divi Mobile, please follow these simple steps:
- Navigate to
Theme Customizer and access Divi Mobile > General Settings. - Scroll down to the
SELECT SECONDARY MENU STYLE field and set it to Bottom Navigation. - Select your secondary WordPress menu in the
SELECT SECONDARY MENU field.
Once you publish the changes, it should look something like this:
To set the primary menu in the bottom navigation area, follow the instructions:
- Navigate to
Theme Customizer and access Divi Mobile > General Settings. - Scroll down to the
SELECT PRIMARY MENU MOVEMENT field and set it to Bottom Navigation.
To ensure the bottom navigation works seamlessly, you should disable the Divi Mobile custom header. Go to Divi Mobile > Custom Header in the Theme Customizer and set CREATE A CUSTOM HEADER to NO.
Customize Your Bottom Navigation
The Bottom Navigation Menu appearance can be customized in the Theme Customizer > Divi Mobile > Bottom Navigation Style. You can customize the background color, icon and text color (normal and active states), and icon and text size under the Bottom Navigation Style settings page:
Set Bottom Navigation Icons
By default, the menu items will get the hamburger icon. You can follow the steps below to change the icon:
- Go to your WordPress Menu by navigating to
Appearance > Menus in the WordPress Dashboard. - Select the menu if required.
- In the top right corner of the screen, click on
Screen Options and enable CSS Classes. - Expand the menu item you want to change the icon.
- Enter the icon class name for the menu in the
CSS Classes (optional) field:
Finding the Icon Class Names
You can find a list of icons with their class names below:
Icon List
arrow_up arrow_down arrow_left arrow_right arrow_left-up arrow_right-up arrow_right-down arrow_left-down arrow-up-down arrow_up-down_alt arrow_left-right_alt arrow_left-right arrow_expand_alt2 arrow_expand_alt arrow_condense arrow_expand arrow_move arrow_carrot-up arrow_carrot-down arrow_carrot-left arrow_carrot-right arrow_carrot-2up arrow_carrot-2down arrow_carrot-2left arrow_carrot-2right arrow_carrot-up_alt2 arrow_carrot-down_alt2 arrow_carrot-left_alt2 arrow_carrot-right_alt2 arrow_carrot-2up_alt2 arrow_carrot-2down_alt2 arrow_carrot-2left_alt2 arrow_carrot-2right_alt2 arrow_triangle-up arrow_triangle-down arrow_triangle-left arrow_triangle-right arrow_triangle-up_alt2 arrow_triangle-down_alt2 arrow_triangle-left_alt2 arrow_triangle-right_alt2 arrow_back icon_minus-06 icon_plus icon_close icon_check icon_minus_alt2 icon_plus_alt2 icon_close_alt2 icon_check_alt2 icon_zoom-out_alt icon_zoom-in_alt icon_search icon_box-empty icon_box-selected icon_minus-box icon_plus-box icon_box-checked icon_circle-empty icon_circle-slelected icon_stop_alt2 icon_stop icon_pause_alt2 icon_pause icon_menu icon_menu-square_alt2 icon_menu-circle_alt2 icon_ul icon_ol icon_adjust-horiz icon_adjust-vert icon_document_alt icon_documents_alt icon_pencil icon_pencil-edit_alt icon_pencil-edit icon_folder-alt icon_folder-open_alt icon_folder-add_alt icon_info_alt icon_error-oct_alt icon_error-circle_alt icon_error-triangle_alt icon_question_alt2 icon_question icon_comment_alt icon_chat_alt icon_vol-mute_alt icon_volume-low_alt icon_volume-high_alt icon_quotations icon_quotations_alt2 icon_clock_alt icon_lock_alt icon_lock-open_alt icon_key_alt icon_cloud_alt icon_cloud-upload_alt icon_cloud-download_alt icon_image icon_images icon_lightbulb_alt icon_gift_alt icon_house_alt icon_genius icon_mobile icon_tablet icon_laptop icon_desktop icon_camera_alt icon_mail_alt icon_cone_alt icon_ribbon_alt icon_bag_alt icon_creditcard icon_cart_alt icon_paperclip icon_tag_alt icon_tags_alt icon_trash_alt icon_cursor_alt icon_mic_alt icon_compass_alt icon_pin_alt icon_pushpin_alt icon_map_alt icon_drawer_alt icon_toolbox_alt icon_book_alt icon_calendar icon_film icon_table icon_contacts_alt icon_headphones icon_lifesaver icon_piechart icon_refresh icon_link_alt icon_link icon_loading icon_blocked icon_archive_alt icon_heart_alt icon_printer icon_calulator icon_building icon_floppy icon_drive icon_search-2 icon_id icon_id-2 icon_puzzle icon_like icon_dislike icon_mug icon_currency icon_wallet icon_pens icon_easel icon_flowchart icon_datareport icon_briefcase icon_shield icon_percent icon_globe icon_globe-2 icon_target icon_hourglass icon_balance icon_star_alt icon_star-half_alt icon_star icon_star-half icon_tools icon_tool icon_cog icon_cogs arrow_up_alt arrow_down_alt arrow_left_alt arrow_right_alt arrow_left-up_alt arrow_right-up_alt arrow_right-down_alt arrow_left-down_alt arrow_condense_alt arrow_expand_alt3 arrow_carrot_up_alt arrow_carrot-down_alt arrow_carrot-left_alt arrow_carrot-right_alt arrow_carrot-2up_alt arrow_carrot-2dwnn_alt arrow_carrot-2left_alt arrow_carrot-2right_alt arrow_triangle-up_alt arrow_triangle-down_alt arrow_triangle-left_alt arrow_triangle-right_alt icon_minus_alt icon_plus_alt icon_close_alt icon_check_alt icon_zoom-out icon_zoom-in icon_stop_alt icon_menu-square_alt icon_menu-circle_alt icon_document icon_documents icon_pencil_alt icon_folder icon_folder-open icon_folder-add icon_folder_upload icon_folder_download icon_info icon_error-circle icon_error-oct icon_error-triangle icon_question_alt icon_comment icon_chat icon_vol-mute icon_volume-low icon_volume-high icon_quotations_alt icon_clock icon_lock icon_lock-open icon_key icon_cloud icon_cloud-upload icon_cloud-download icon_lightbulb icon_gift icon_house icon_camera icon_mail icon_cone icon_ribbon icon_bag icon_cart icon_tag icon_tags icon_trash icon_cursor icon_mic icon_compass icon_pin icon_pushpin icon_map icon_drawer icon_toolbox icon_book icon_contacts icon_archive icon_heart icon_profile icon_group icon_grid-2x2 icon_grid-3x3 icon_music icon_pause_alt icon_phone icon_upload icon_download icon_rook icon_printer-alt icon_calculator_alt icon_building_alt icon_floppy_alt icon_drive_alt icon_search_alt icon_id_alt icon_id-2_alt icon_puzzle_alt icon_like_alt icon_dislike_alt icon_mug_alt icon_currency_alt icon_wallet_alt icon_pens_alt icon_easel_alt icon_flowchart_alt icon_datareport_alt icon_briefcase_alt icon_shield_alt icon_percent_alt icon_globe_alt icon_clipboard social_facebook social_twitter social_pinterest social_googleplus social_tumblr social_tumbleupon social_wordpress social_instagram social_dribbble social_vimeo social_linkedin social_rss social_deviantart social_share social_myspace social_skype social_youtube social_picassa social_googledrive social_flickr social_blogger social_spotify social_delicious social_facebook_circle social_twitter_circle social_pinterest_circle social_googleplus_circle social_tumblr_circle social_stumbleupon_circle social_wordpress_circle social_instagram_circle social_dribbble_circle social_vimeo_circle social_linkedin_circle social_rss_circle social_deviantart_circle social_share_circle social_myspace_circle social_skype_circle social_youtube_circle social_picassa_circle social_googledrive_alt2 social_flickr_circle social_blogger_circle social_spotify_circle social_delicious_circle social_facebook_square social_twitter_square social_pinterest_square social_googleplus_square social_tumblr_square social_stumbleupon_square social_wordpress_square social_instagram_square social_dribbble_square social_vimeo_square social_linkedin_square social_rss_square social_deviantart_square social_share_square social_myspace_square social_skype_square social_youtube_square social_picassa_square social_googledrive_square social_flickr_square social_blogger_square social_spotify_square social_delicious_square
By applying these settings, you can enjoy a modern navigation experience that's both intuitive and pleasing to the eye. Remember to save and publish your changes to see the bottom navigation come to life on your mobile site.