Is there a way to add a subheader menu under the Header Menu (main)?
Thanks in advance.
Hello firetoss,
Unfortunately, our theme does not have such an option to add another subheader menu under the main menu, sorry! Please try to find some plugins with this functionality and see how it works for you. Also, if you do not find any plugins for what you want and if you want to display more levels in our theme and you are not aware the steps in this regard, please consider hiring a freelancer/developer to do this for you because we cannot provide custom services at the moment, sorry!
Thank you for your understanding!
This fixed it
Header.php
<div class=”td-container”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘sub-menu’, ‘container_class’ => ‘nav_sub’ ) ); ?>
</div>
Functions.php
// Add Sub Menu
function register_my_menu() {
register_nav_menu(‘sub-menu’,__( ‘Sub Menu’ ));
}
add_action( ‘init’, ‘register_my_menu’ );
Custom CSS
.td-container .nav_sub ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
}
.td-container .nav_sub li {
float: left;
margin-left: 0;
}
.td-container .nav_sub li a {
display: inline-block;
color: #666;
text-align: center;
padding: 13px 13px;
text-decoration: none;
}
.td-container .nav_sub li a:hover {
background-color: #d9d9d9;
}
Hello firetoss,
Thank you for this customization. It can be very useful for customers who want it.
Thank you for your message!
Your welcome, hopefully it will be of use for other customers.
Then used this in the custom css to add the sub nav menu items to show only on the mobile menu but the sub nav menu to be hidden on mobile.
@media screen and (max-width: 767px) {
.nav_sub {
display:none !important;
}
}
@media screen and (min-width: 768px) {
.menu-item-104301 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104302 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104303 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104304 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104305 {
display: none;
}
}
