Configuring the Primary Navigation Menu in WPResidence

The primary navigation menu is a crucial element of your real estate website, guiding visitors to important sections of your site. WPResidence offers robust options for creating and customizing your navigation menu. This guide walks you through the process of setting up, styling, and optimizing your primary navigation menu.

What is the Primary Navigation Menu

The primary navigation menu is the main menu shown in your website header. It helps visitors access the most important pages of your site, such as property lists, search pages, contact pages, blog pages, and any custom landing pages you want to highlight.

In WPResidence, this menu is managed from the standard WordPress menu area:

Appearance > Menus

This menu can be used in both the default WPResidence header and headers created with WPResidence Elementor Studio.

Creating your primary navigation menu

To begin, create a new menu and assign it as your primary navigation:

1. Log in to your WordPress admin dashboard.
2. Navigate to Appearance > Menus.
3. Click on create a new menu at the top of the page.
4. Give your menu a name, for example Primary Navigation.
5. Under Menu Settings or Display location, assign the menu to the primary menu location used by your website.
6. Click Create Menu.
7. Click Save Menu.

Adding items to your menu

Now that you have created your menu, you can add items to it:

1. On the left side of the Menus page, you will see boxes for Pages, Posts, Custom Links, and Categories.
2. Select the items you want to add to your menu.
3. Click Add to Menu.
4. Drag and drop menu items to arrange them in your preferred order.
5. To create dropdown menus, drag menu items slightly to the right to make them sub-items.
6. Click Save Menu when you are satisfied with the arrangement.

Customizing menu items

WPResidence allows for advanced customization of menu items directly from the WordPress menu screen.

To edit a specific menu item:

1. Click the arrow next to the menu item to expand its settings.
2. Edit the available fields such as navigation label, title attribute, CSS classes, description, icon, or label.
3. Save the menu after making changes.

Depending on your setup, some fields may not be visible by default. You can enable them from Screen Options in the top right corner of the Menus page.

Adding icons to menu items

WPResidence allows you to enrich menu items with icons.

1. Click the arrow next to a menu item to expand its options.
2. In the menu item fields, use the available icon option or, if needed for your setup, add a class for your desired icon in the CSS Classes field.
3. Save your menu.

For example, you may use a Font Awesome class such as fas fa-home for a home icon.

Adding descriptions to menu items

1. In the Menus page, click Screen Options at the top right.
2. Check the box for Description.
3. You can now add descriptions to your menu items.

Descriptions may appear depending on your theme settings and the menu design you use.

Styling your navigation menu

To customize the look of your navigation menu, you can add custom CSS to your child theme’s style.css file or to the custom CSS area used by your website.

This is useful if you want more control over menu colors, spacing, dropdown design, or typography.

Changing menu font and color

.navbar-nav > li > a {
font-family: 'Arial', sans-serif;
font-size: 16px;
color: #333333;
}
.navbar-nav > li > a:hover {
color: #0073e1;
}

Styling dropdown menus

.dropdown-menu {
background-color: #f8f8f8;
border: 1px solid #e7e7e7;
}
.dropdown-menu > li > a {
color: #333333;
}
.dropdown-menu > li > a:hover {
background-color: #e7e7e7;
}

Mobile menu customization

Make sure your menu is mobile-friendly. You can use CSS adjustments like these when needed:

@media (max-width: 768px) {
.navbar-nav > li > a {
font-size: 14px;
padding: 10px 15px;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}

Always test the menu on desktop, tablet, and mobile to make sure dropdowns and Mega Menus remain easy to use.

Advanced menu customizations

If you need more advanced menu behavior, WPResidence can also be extended with custom code from a child theme.

Adding a search bar to your menu

To add a search bar to your navigation menu, you can use a custom walker class.

1. Create a new file in your child theme folder called custom-nav-walker.php.
2. Add the following code to this file:

class Custom_Nav_Walker extends Walker_Nav_Menu {
function end_el(&$output, $item, $depth=0, $args=array()) {
if ($item->title == 'Search') {
$output .= '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '">
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="Search..."/>
<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</form>';
}
$output .= "</li>\n";
}
}

• In your child theme’s functions.php file, add:

require_once('custom-nav-walker.php');
function custom_nav_menu_args($args) {
return array_merge($args, array(
'walker' => new Custom_Nav_Walker()
));
}
add_filter('wp_nav_menu_args', 'custom_nav_menu_args');

• Add a menu item with the title Search where you want the search bar to appear.

Creating a Mega Menu

WPResidence supports Mega Menus for displaying larger and richer dropdown content.

The older idea of a Mega Menu was usually based on building large dropdowns with multiple submenu columns. In the current WPResidence setup, the recommended method is to create the Mega Menu content as a dedicated Studio Template and then assign that template to a menu item.

This gives you much more flexibility for:

• multiple columns of links
• headings and grouped sections
• images and icons
• custom Elementor layouts
• richer navigation blocks

To create a Mega Menu:

1. Create a top-level menu item in your WordPress menu.
2. Create a Mega Menu Studio Template from Studio Templates.
3. Design the Mega Menu content with Elementor.
4. Go back to Appearance > Menus.
5. Open the menu item that should trigger the Mega Menu.
6. Enable Set as Mega Menu?.
7. Select the Studio Mega Menu Template you created.
8. Save the menu.

Mega Menu with WPResidence Studio

The new WPResidence Mega Menu system works with both:

• default WPResidence menus
• menus shown in headers created with WPResidence Elementor Studio

The exact flow is:

1. Go to Studio Templates > Add Studio Template.
2. Create the template and set Template Type to Mega Menu.
3. Set the page template to Elementor Full Width.
4. Choose whether the custom template should be full width.
5. Design the Mega Menu layout with Elementor.
6. Go to Appearance > Menus.
7. Edit the top-level menu item that should open the Mega Menu.
8. Check Set as Mega Menu?.
9. Select your Studio Mega Menu Template.
10. Save the menu.

For the full step-by-step tutorial, read:

Mega Menu with WPResidence Studio

Troubleshooting common menu issues

If you encounter issues with your navigation menu, try these solutions:

• Menu items not appearing: Ensure you have assigned your menu to the correct primary menu location.
• Dropdown menus not working: Check your JavaScript console for errors and ensure your theme’s JavaScript files are loading correctly.
• Menu styling inconsistencies: Use your browser inspector tool to identify conflicting CSS rules.
• Mobile menu not collapsing: Verify that your theme’s responsive JavaScript is functioning properly.
• Mega Menu not appearing: Confirm that Set as Mega Menu? is enabled for that menu item and that a valid Studio Mega Menu Template is selected.
• Wrong menu shown in header: Recheck the assigned WordPress menu location and the header setup.

Conclusion

A well-configured primary navigation menu enhances user experience and helps visitors easily find the information they need on your real estate website.

By using WPResidence menu options, dropdowns, icons, descriptions, custom styling, and the new Mega Menu system with WPResidence Studio, you can create a navigation structure that is both attractive and effective.

Always test your menu across different devices and browsers to ensure consistent functionality and appearance.