--- title: How do I edit the Menu Preset? description: Edit the Menu preset to adjust styling, layouts, fonts, and hover effects, ensuring easy navigation for visitors --- [Skip to content](https://success.ministrydesigns.help/how-do-i-edit-the-menu-preset#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) # How do I edit the Menu Preset? ## Customize your website’s navigation menu 1\. The [Menu Widget](https://success.ministrydesigns.help/how-do-you-add-new-menu-items) has three presets. You can configure the appearance of menu and submenu items for both Desktop and Mobile resolutions in the preset. Click Preset 1 ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/7b866852-cf61-4496-b852-1fbf190dd4dd/ascreenshot.jpeg?tl_px=0,8&br_px=859,489&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=225,212) ### Desktop Menu 2\. Switch to the Desktop menu customization. You can customize the following tabs: **Menu, Submenu** You can customize the following blocks in the Menu tab: **Menu Items, Selected Item** ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/5c61cf01-cb9a-44c3-b5f3-7f220e3ceb64/ascreenshot.jpeg?tl_px=0,31&br_px=859,512&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=50,212) 3\. Specify a background color for the Menu widget. If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/b18bf91a-b58d-40a0-b129-61b71d9ef7fa/ascreenshot.jpeg?tl_px=0,136&br_px=859,617&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=111,212) 4\. Select Font and Font Style for the Menu Items ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/8daec338-fa71-436c-a1e6-621c4f12adca/ascreenshot.jpeg?tl_px=0,40&br_px=859,521&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=208,212) 5\. Specify the Font Size for the Menu Items. Click a device icon to adjust the setting for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/73cf3530-19a9-47ed-aafa-52ad6d26dabb/ascreenshot.jpeg?tl_px=0,86&br_px=859,567&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=31,212) 6\. Use Normal and Hover States buttons to set the color for Normal and Hover States for the Menu Widget items or make Menu items underlined with the "U" icon. You can also configure the Selected Item to have a different font color and underlined text for both states. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/5dd856b2-9b1c-41b9-9ae3-3b8165070cdf/ascreenshot.jpeg?tl_px=0,130&br_px=859,611&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=218,212) 7\. Specify the Font Color and if the text needs to be underlined for the Selected Item in the menu items. Selected Item is the menu item the visitor is currently on when using a Desktop device. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/455d5ec9-3ba2-45d6-acf5-3e5917913b7a/ascreenshot.jpeg?tl_px=0,172&br_px=859,653&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=100,269) ### Desktop Submenu 8\. You can customize the following blocks in the Submenu tab: **Submenu Items, Selected Item** ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/228ebf0d-217c-4519-a038-279d73029547/ascreenshot.jpeg?tl_px=0,91&br_px=859,572&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=173,212) 9\. Specify a background color for the Submenu items. If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/5aef8018-0c99-4a03-8c51-d0c8e8b6a0ee/ascreenshot.jpeg?tl_px=0,136&br_px=859,617&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=107,212) 10\. This is how it will look on the website preview. The submenu items now also have a background ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/90c3c7ad-75bb-4054-ae1f-b2adce9c894a/ascreenshot.jpeg?tl_px=0,166&br_px=859,647&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=334,212) 11\. Select Font and Font Style for the Submenu Items ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/079a2c9d-52c2-49dd-a149-c7098b24e6b4/ascreenshot.jpeg?tl_px=0,40&br_px=859,521&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=207,212) 12\. If needed, turn on the toggle for Font Size for the Submenu Items. However, please be advised that changes to Font Size for Submenu Items can negatively impact your menu (as it is intended to be small) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/3f574760-0c3c-4ff0-b2d5-1e8f8176bb60/ascreenshot.jpeg?tl_px=0,105&br_px=859,586&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=-2,212) 13\. Specify the Font Size for the Submenu Items. Click a device icon to adjust the setting for that particular device resolution ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/634b1d0c-5abf-4e07-b646-037660ca3e9b/ascreenshot.jpeg?tl_px=0,106&br_px=859,587&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=29,212) 14\. Specify the color for the Submenu Delimiter. If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/9c4c0ded-9b1b-4f80-8b9a-13e64390457b/ascreenshot.jpeg?tl_px=0,75&br_px=859,556&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=126,212) 15\. This is how it will look on the website preview. The delimiter for submenu items is red now ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/034e9373-1c4a-461c-8147-431d3549d7c7/ascreenshot.jpeg?tl_px=0,354&br_px=859,835&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=401,212) 16\. Use the Normal and Hover States buttons to set the color for Normal and Hover States for the Submenu items or make Submenu items underlined with the "U" icon. You can also configure the Selected Item to have a different font color and underlined text for both states. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/6d87a928-8ebd-4499-bd6d-b1a31d59c975/ascreenshot.jpeg?tl_px=0,38&br_px=859,519&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=218,212) 17\. Specify Icon Color for the Submenu Items ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/19b8098e-dfc9-48fa-b2b8-b407900cc454/ascreenshot.jpeg?tl_px=0,81&br_px=859,562&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=118,212) 18\. This is how it will look on the website preview. The submenu items icon is red now ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/75baffb5-6cb1-45e0-8fab-732d8ec8f202/ascreenshot.jpeg?tl_px=201,172&br_px=1061,653&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,284) 19\. Specify the Font Color and if the text needs to be underlined for the Selected Item in the Submenu Items. Selected Item is the submenu item the visitor is currently on when using a Desktop device. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/b589e99b-8541-4e57-8710-adeae0e9bf2c/ascreenshot.jpeg?tl_px=0,83&br_px=859,564&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=103,212) 20\. Specify the Icon Color for the Selected Item in the Submenu Items. If you need a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/b16459e7-712d-4212-ad4e-f2ef8fc0fb9c/ascreenshot.jpeg?tl_px=0,172&br_px=859,653&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=118,331) ### Mobile Menu 21\. The only difference in Mobile Menu preset customization is that in the Menu tab, you can customize the appearance of the Hamburger Icon. Set the Icon Color and Background color. You can also configure the same for Selected Item (the menu item the visitor is currently on when using a Mobile device). ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/3ac5320b-64ae-4bd6-9d75-2f6c137aa57f/ascreenshot.jpeg?tl_px=0,310&br_px=859,791&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=118,212) 22\. This is how it will look on the website preview. The hamburger icon color has changed ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/3e06cc77-b613-4cb6-8cbf-f8699df61387/ascreenshot.jpeg?tl_px=354,288&br_px=1214,769&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 23\. Click the "Save" button to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-28/c69f3310-8878-40db-b8ff-817f5d8292cb/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=186,412) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,