How To: Update the Menus

How To: Update the Menu

1. Go to the Apearance section and select the ‘Menus’
2. In the menu Panel first ‘select’ the menu you want to update. By first selecting the menu from the dropdown and then hitting the ‘select’ button.
   For the MDSynergy Site the menus are as follows;
   • Primary Menu (Top Navigation)
   • The Footer Navigation has 4 menus which correcltat with their headers in the footer;
     • Company
     • Contacts
     • Pricing
     • Products
3. Once you select the menu you want to edit, you can peform the following updates;
   • Add Menu Items: To add items, select pages, categories, or custom links from the left panel and click “Add to Menu”. Menu items can be either, pages, posts or special urls of your choice.
   • Remove Menu Items: To remove items, click on the item in the menu structure, then click “Remove”.
   • Reorder Items: Drag and drop menu items to reorder them.
   • Set Menu Locations: If your theme supports multiple menus, assign your menu to a location using the “Menu Settings” at the bottom.
   • Save Changes: Click “Save Menu” to apply your changes.

Remember, changes are immediate, so check your site to ensure the menu appears as expected.

How To: Add a Button to the Menu

1. Select the menu you want to add the button to
2. Choose the ‘custom link’ option to add to the menu. Place the new menu item in the location you want it to appear.
3. Save your updates. This will add the menu item as a link, next you will style the menu item as a button by doing the following;
4. First you will need the link ID: Go to the live page, and right click on the menu item link that you just created, and select ‘inspect’. Locate the menu item ID for the new link you just created. Note this new ID, you will need it shortly
5. Next Copy the code below
6. Then , go to the WP Dashboard and then to Appearance > Customize > Additional CSS
7. Scroll through the CSS until you see the header /* BUTTONS: Navbar Login Button Style Client Login*/ and add your CSS below the login button after the “}”
8. Paste the code you just copied after the ‘}’
9. Change the button ID by updating the css code from ‘#menu-item-928’ to the new menu item ID.
10. Change the ‘background-color’ of the button by using these style guide hex numbers. Change to the new color by updating the purple #5E38AB with the color you want the button to be. Also change the a:hover status of the button from orange #ef7336 to your selected color.
11. Publish the CSS you just updated

Your link will now appear as a button.

How To: Update the Footer Font Size

1) first go into the website and and right click on the footer items you want to shrink. select ‘inspect’ from the menu. Look for the footer item ids. For the 2 you just created, the ids are 1668 and 1669.

2) then you need to add these ids to the footer css that changes the font size from the default size to the reduced size by doing the following;

3) Go to WordPress dashboard and select ‘Appearance’ then select ‘Customize’. this will open up the customize panel. 

4) scroll down to ‘Additional CSS’. This will open up the css for the website.

5) scroll down until you see the section called “FOOTER MENU: Shrink default font size”

In this section add your menu ids to the top as follows #menu-item-1668, #menu-item-1669,

Hit the “publish” button. this will style your new footer elements to match the other items in the footer.