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

Setting Up the Secondary Navigation Menu (Header Type 6)

348 views

Setting Up the Secondary Navigation Menu (Header Type 6)

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

Enabling Header Type 6

Before setting up the secondary menu, ensure you have Header Type 6 activated:

  1. Navigate to the WPResidence Theme Options
  2. Find the Header Settings section
  3. Look for the option to select header type
  4. Choose Header Type 6
  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 (e.g., “Secondary Navigation”)
  4. Under “Menu Settings,” look for a checkbox labeled “Secondary Menu” or “Header 6 Secondary Menu”
  5. Check this box to assign your new menu to the secondary navigation location
  6. Click “Create Menu”

Adding Items to Your Secondary Menu

Now that you’ve created your secondary menu, it’s time to add items:

  1. Select pages, posts, custom links, or categories from the left sidebar
  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’s style.css file:

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 6 typically places the secondary menu on the right side of the header. To adjust its alignment:


.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 (e.g., “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

Adding a Search Bar to Secondary Menu

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’s 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:

  1. Create a top-level menu item in your secondary menu
  2. Add multiple columns of sub-menu items beneath it
  3. Apply custom CSS to style your mega menu:


.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;
}

Troubleshooting Secondary Menu Issues

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

  • Menu not appearing: Verify that you’ve assigned the menu to the correct location for Header Type 6
  • Styling conflicts: Use your browser’s 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 your theme supports mega menus for the secondary navigation and that your CSS is correctly styled for the mega menu structure

Conclusion

The secondary navigation menu in Header Type 6 offers an excellent opportunity to enhance your site’s 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 overall user experience on your real estate website.