Skip to main content

Bottom Navigation Style

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.

Use a secondary menu

info

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:

  1. Navigate to Theme Customizer and access Divi Mobile > General Settings.
  2. Scroll down to the SELECT SECONDARY MENU STYLE field and set it to Bottom Navigation.
  3. Select your secondary WordPress menu in the SELECT SECONDARY MENU field.

Bottom Navigation Menu settings

Once you publish the changes, it should look something like this:
Preview

Use only the Bottom Navigation menu

To set the primary menu in the bottom navigation area, follow the instructions:

  1. Navigate to Theme Customizer and access Divi Mobile > General Settings.
  2. Scroll down to the SELECT PRIMARY MENU MOVEMENT field and set it to Bottom Navigation.

Primary menu as Bottom Navigation settings

info

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:

Bottom Navigation Style Customizations

Set Bottom Navigation Icons

By default, the menu items will get the hamburger icon. You can follow the steps below to change the icon:

  1. Go to your WordPress Menu by navigating to Appearance > Menus in the WordPress Dashboard.
  2. Select the menu if required.
  3. In the top right corner of the screen, click on Screen Options and enable CSS Classes.
  4. Expand the menu item you want to change the icon.
  5. Enter the icon class name for the menu in the CSS Classes (optional) field:

Enable CSS class and add icon class

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.