Interactive Guide to Updating Menu Code Blocks

How to use this guide: This interactive page shows you how to make common changes to the menu code blocks. Each section includes examples, before and after comparisons, and instructions. Scroll down to find the specific change you want to make.

To update where a link goes, find the href attribute and change the URL inside the quotes.

<a href="/change-this-part" style="color: white; text-decoration: none;">Link Text</a>

Before:

<a href="/election-security" style="color: white;">Election Security</a>
Election Security

After:

<a href="/new-program-page" style="color: white;">Election Security</a>
Election Security

The link would now go to "/new-program-page" instead

2. Changing Link and Button Text

To change what text appears on the link or button, edit the text between the opening <a> and closing </a> tags.

<a href="/link-url" style="color: white; text-decoration: none;">Change This Text</a>

Before:

<a href="/link" class="learn-more-button">LEARN MORE</a>
LEARN MORE

After:

<a href="/link" class="learn-more-button">ENROLL NOW</a>
ENROLL NOW

3. Changing Colors

Colors are defined using hex codes (like #173852). You can update these to change the background color, text color, or button color.

Changing Background Color:

<div class="menu-name-megamenu" style="background-color: #173852; padding: 20px;">

Before:

<div style="background-color: #173852; padding: 10px; color: white;">Dark Blue Background</div>
Dark Blue Background

After:

<div style="background-color: #0a2240; padding: 10px; color: white;">Darker Blue Background</div>
Darker Blue Background

Changing Button Color:

<a href="/link" class="learn-more-button" style="background-color: #D4AF37; color: #173852; padding: 10px 20px;">

Before:

<a href="/link" style="background-color: #D4AF37; color: #173852; padding: 8px 15px; display: inline-block; border-radius: 4px; text-decoration: none; font-weight: bold;">LEARN MORE</a>
LEARN MORE

After:

<a href="/link" style="background-color: #0099cc; color: white; padding: 8px 15px; display: inline-block; border-radius: 4px; text-decoration: none; font-weight: bold;">LEARN MORE</a>
LEARN MORE

4. Changing Menu Width

To make the menu wider or narrower, change the width value.

<div class="megamenu-content" style="width: 300px; max-width: 100%;">

Before:

<div style="width: 300px; background-color: #f0f0f0; padding: 10px;">This menu is 300px wide</div>
This menu is 300px wide

After:

<div style="width: 400px; background-color: #f0f0f0; padding: 10px;">This menu is 400px wide</div>
This menu is 400px wide

To add a new link to the menu, copy and paste an existing list item (<li>) and change the link and text.

<li style="margin-bottom: 10px;"> <a href="/your-new-page" style="color: white; text-decoration: none; font-size: 14px; display: block; padding: 5px 0; transition: all 0.2s ease;"> Your New Link Text </a> </li>

Before:

<ul style="list-style: none; padding: 0; margin: 0;">
    <li><a href="/link1">First Link</a></li>
    <li><a href="/link2">Second Link</a></li>
</ul>

After:

<ul style="list-style: none; padding: 0; margin: 0;">
    <li><a href="/link1">First Link</a></li>
    <li><a href="/link2">Second Link</a></li>
    <li><a href="/new-link">New Added Link</a></li>
</ul>

6. Interactive Code Editor

Try editing the code below to see how your changes affect the menu's appearance. Make changes in the HTML tab and click "Preview Changes" to see the result.

7. Color Reference

Here are some common colors you might want to use in your menus:

Color Name Hex Code Sample Usage
GW Dark Blue #173852
Main menu background
GW Gold #D4AF37
Buttons
GW Blue #0039A6
Alternative background
GW Buff #EACA8F
Accent color
Light Blue #5bc0de
Special links
White #FFFFFF
Text color
Final tips: