Home / , / Setting Up the Secondary Navigation Menu (Header Type 5)

Setting Up the Secondary Navigation Menu (Header Type 5)

624 views

Content

Setting Up the Secondary Navigation Menu (Header Type 5)

Header Type 5 in WPResidence offers a unique layout that includes a secondary navigation menu. This additional menu provides more flexibility in organizing your site navigation structure. This guide walks you through the process of setting up, customizing, and optimizing your secondary navigation menu for Header Type 5.

What is the Secondary Navigation Menu in Header Type 5

The secondary navigation menu is an extra menu area available when using Header Type 5.

You can use it for:

  • quick links
  • secondary pages
  • support or contact links
  • language or account shortcuts
  • dropdown items
  • Mega Menu layouts

This menu is managed from the standard WordPress menu area:

Appearance > Menus

Enabling Header Type 5

Before setting up the secondary menu, make sure you have Header Type 5 activated:

  1. Navigate to the WPResidence Theme Options.
  2. Find the Header Settings section.
  3. Look for the option to select the header type.
  4. Choose Header Type 5.
  5. Save your changes.

Creating your secondary navigation menu

To create a new menu for your secondary navigation:

  1. Go to Appearance > Menus in your WordPress dashboard.
  2. Click create a new menu at the top of the page.
  3. Name your menu, for example Secondary Navigation.
  4. Under Menu Settings or Display location, look for the menu location used by Header Type 5 secondary navigation.
  5. Assign your new menu to that secondary menu location.
  6. Click Create Menu.
  7. Save the menu.
Note: The exact label of the menu location may vary slightly depending on your setup, but it is the secondary menu location used by Header Type 5.

Adding items to your secondary menu

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

  1. Select Pages, Posts, Custom Links, or Categories from the left side.
  2. Click Add to Menu to include these items in your secondary navigation.
  3. Arrange the items by dragging and dropping them into your desired order.
  4. Create dropdown submenus by slightly indenting items under a parent item.
  5. Click Save Menu to preserve your changes.

Styling your secondary navigation menu

To customize the appearance of your secondary navigation menu, add custom CSS to your child theme style.css file or to the custom CSS area used by your website.

This allows you to adjust fonts, colors, spacing, dropdown behavior, and alignment.

Basic styling for secondary menu

.header_type6 .wpresidence_header_6_secondary_menu {
font-family: 'Arial', sans-serif;
font-size: 14px;
}
.header_type6 .wpresidence_header_6_secondary_menu > li > a {
color: #444444;
padding: 10px 15px;
}
.header_type6 .wpresidence_header_6_secondary_menu > li > a:hover {
color: #0073e1;
background-color: #f5f5f5;
}

Styling dropdown menus in secondary navigation

.header_type6 .wpresidence_header_6_secondary_menu .sub-menu {
background-color: #ffffff;
border: 1px solid #e7e7e7;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header_type6 .wpresidence_header_6_secondary_menu .sub-menu li a {
color: #333333;
padding: 8px 15px;
}
.header_type6 .wpresidence_header_6_secondary_menu .sub-menu li a:hover {
background-color: #f0f0f0;
}

Aligning the secondary menu

Header Type 5 typically places the secondary menu on the right side of the header. To adjust its alignment, you can use custom CSS like this:

.header_type6 .wpresidence_header_6_secondary_menu {
display: flex;
justify-content: flex-end; /* Aligns menu to the right */
}
.header_type6 .wpresidence_header_6_secondary_menu.align_left {
justify-content: flex-start; /* Aligns menu to the left */
}
.header_type6 .wpresidence_header_6_secondary_menu.align_center {
justify-content: center; /* Centers the menu */
}

Adding icons to secondary menu items

Enhance your secondary menu with icons for better visual appeal:

  1. Edit a menu item in Appearance > Menus.
  2. In the CSS Classes field, add a class for your desired icon, for example fas fa-home for a home icon using Font Awesome.

Then style the icons with CSS:

.header_type6 .wpresidence_header_6_secondary_menu > li > a i {
margin-right: 5px;
font-size: 16px;
}
.header_type6 .wpresidence_header_6_secondary_menu > li > a:hover i {
color: #0073e1;
}

Responsive design for secondary menu

Ensure your secondary menu is mobile-friendly:

@media (max-width: 768px) {
.header_type6 .wpresidence_header_6_secondary_menu {
display: none; /* Hide on mobile by default */
}
.header_type6 .mobile_secondary_menu_toggle {
display: block; /* Show a toggle button for secondary menu */
}
.header_type6 .wpresidence_header_6_secondary_menu.mobile_open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
right: 0;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header_type6 .wpresidence_header_6_secondary_menu.mobile_open > li {
width: 100%;
}
.header_type6 .wpresidence_header_6_secondary_menu.mobile_open > li > a {
padding: 10px 15px;
border-bottom: 1px solid #e7e7e7;
}
}

Advanced customizations

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

To include a search bar in your secondary navigation:

  1. Create a custom menu item for the search bar.
  2. Add the following PHP code to your child theme functions.php file:
function add_search_to_secondary_menu($items, $args) {
if($args->theme_location == 'header_6_second_menu') {
$items .= '<li class="menu-item-search">
<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>
</li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_search_to_secondary_menu', 10, 2);

Creating a Mega Menu in secondary navigation

For a more complex secondary navigation structure, you can implement a Mega Menu.

The older idea was to build this with multiple columns of submenu items and custom CSS. That approach is still useful as a styling reference, but the recommended WPResidence method is now to use a dedicated Studio Mega Menu template.

Basic flow:

  1. Create a top-level menu item in your secondary menu.
  2. Create a Mega Menu Studio Template from Studio Templates.
  3. Design the content with Elementor.
  4. Go to Appearance > Menus.
  5. Edit the top-level menu item used in the secondary navigation.
  6. Enable Set as Mega Menu?.
  7. Select the correct Studio Mega Menu Template.
  8. Save the menu.

If you want to style a Mega Menu with CSS, you can still use custom styling such as:

.header_type6 .wpresidence_header_6_secondary_menu .mega-menu {
position: static;
}
.header_type6 .wpresidence_header_6_secondary_menu .mega-menu-content {
display: flex;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 20px;
}
.header_type6 .wpresidence_header_6_secondary_menu .mega-menu-column {
flex: 1;
padding: 0 15px;
}
.header_type6 .wpresidence_header_6_secondary_menu .mega-menu-title {
font-weight: bold;
margin-bottom: 10px;
color: #333333;
}

Mega Menu with WPResidence Studio

The new Mega Menu system can be used for all menus, including the secondary menu used by Header Type 5.

The exact steps are:

  1. Go to Studio Templates > Add Studio Template.
  2. Create a 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 with Elementor.
  6. Go to Appearance > Menus.
  7. Edit the top-level item from the secondary menu that should open the Mega Menu.
  8. Check Set as Mega Menu?.
  9. Select the Studio Mega Menu Template.
  10. Save the menu.

For the full step-by-step guide, see:

Mega Menu with WPResidence Studio

Important: The Mega Menu assignment is still done from Appearance > Menus, even when you use Studio Templates to build the dropdown content.

Troubleshooting secondary menu issues

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

  • Menu not appearing: Verify that you have assigned the menu to the correct location for Header Type 5.
  • Styling conflicts: Use your browser inspector tool to identify and resolve CSS conflicts.
  • Mobile responsiveness issues: Ensure your responsive CSS is correctly targeting the secondary menu elements.
  • Mega Menu not working: Check that Set as Mega Menu? is enabled for the correct menu item and that the selected Studio Mega Menu template is valid.
  • Dropdown issues: Recheck the menu structure and submenu indentation in the WordPress menu editor.

Conclusion

The secondary navigation menu in Header Type 5 offers an excellent opportunity to enhance your website navigation structure.

By carefully planning your menu items, applying custom styles, and implementing advanced features like search functionality or Mega Menus, you can create a secondary navigation that complements your primary menu and improves the overall user experience on your real estate website.

For larger dropdown layouts, the recommended approach is to use the new WPResidence Studio Mega Menu system together with the standard WordPress menu manager.