Double menu bar

[demonboy]

I’m interested in adding a double menu bar, like the one here:

https://www.namecheap.com/security/ssl-certificates.aspx

Like the example above I’d want it to include a drop-down menu and also move my shopping cart to it.

Any guides on building this?

[Prasant]

Hello @demonboy,

Thanks for asking.

In X Theme having double menu bar similar to what you are looking for will require significant amount of custom development which falls outside the scope of support we can offer. However, I can give you some direction that can be used as a base framework to get started.

First you need to setup child theme. You can use following resources to download and setup child theme.

Download Child theme from following source: https://theme.co/apex/child-themes

Please take a look at following article to setup child theme:

Child Themes | Themeco Docs

Best Practices | Themeco Docs

1. Next, copy _nav-primary.php from /wp-content/themes/x/framework/legacy/cranium/headers/views/global/ under /wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/.
2. As this is going to be a fresh navigation setup, we need to register a new menu location. For that open the file you have copied under child theme. Probably after line number 16 which is a closing </a> tag, add following piece of code.

<nav id="second_navbar" class="x-nav-wrap desktop" role="navigation">
  <?php
      wp_nav_menu( array(
        'theme_location' => 'second_primary',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );
  ?>
</nav>

3. Now add following line of code in child theme function.php file.

register_nav_menu( 'second_primary', 'Second Navbar' );

Once you correctly setup above process, under Appearance > Menu you should see one more navigation location as shown in screenshot. You need to select the menu.

Please note that I have shared some steps to help you get started. Getting exact layout similar to the link you have shared will fall outside the scope of support we can offer. You will need to use CSS to style the menu to mimic the layout. I would also like to let you know that custom code can break the layout and functioning of website. We won’t be able to provide support in that scenario. Beyond this, we won’t be able to help you in this customization request. In case you are not comfortable with programming, please get in touch with a developer to assist you.

I am sharing few resources that you can refer to get some more information to menu registration process:

https://codex.wordpress.org/Function_Reference/register_nav_menus
https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

Thanks for understanding.

[demonboy]

Thank you, Prasant, for a comprehensive answer. This is more than enough to get me going. I’m happy to fill in the missing blanks with whatever code is required. Great reply

[mldarshana]

Glad we were able to help