Love this theme! As a thank you, here’s some custom code. Sure there are better ways, but I don’t know them. 🙂 I spent last night coding this out, and I figure some others might have the same request. I’m running WordPress MU and wanted to share a menu with all the sites, but I didn’t want to manually enter each in. The code will pull the contents from the top menu into the mobile menu.
//// TO MAKE MENU APPEND TO MOBILE RESPONSIVE MENU. ONLY TOP LEVEL LINKS /////
Custom CSS – Enter into Theme Options -> Custom Code -> Custom CSS
@media (max-width: 767px)
{
/* Hide Dropdowns */
#menu-top-bar li ul {
display: none !important;
visibility: none;
}
/* Hide Down Icon */
#menu-top-bar .td-icon-menu-down {
display: none;
}
.top-header-menu li {
display: list-item;
}
}
CUSTOM JAVACSRIPT – Enter into Theme Options -> Custom Code -> Custom Javascript
jQuery(function() {
var content = jQuery(".menu-top-container").contents(); //GET TOP MENU CONTENT
jQuery(".td-mobile-content").append("<hr />"); // THIS JUST ADDS A DEVIDER
jQuery(".td-mobile-content").append(content.clone()); //clone to contents (so it won't be reomoved from original element) and move element into menu
});
That’s it. 🙂 Below are a few more options.
/// THESE ARE OPTIONS THAT DON’T PULL THE CODE INTO THE MOBILE MENU, BUT DISPLAY IT AT THE TOP.
CSS TO MAKE TOP MENU (ONLY) SHOW UP ABOVE THE CONTENT IN MOBILE MODE (newspaper 7). This one has the links side by side with drop downs..
@media (max-width: 767px)
{
.td-header-sp-top-menu {
display: block !important;
}
.td-header-top-menu-full {
display: block;
}
#menu-top-bar {
padding: 0 0 0 40px !important;
}
}
CSS TO MAKE TOP MENU (ONLY) SHOW UP ABOVE THE CONTENT IN MOBILE MODE (newspaper 7). This one removes dropdowns and stacks the links.
@media (max-width: 767px)
{
.td-header-sp-top-menu {
display: block !important;
}
.td-header-top-menu-full {
display: block;
}
#menu-top-bar {
padding: 0 0 0 40px !important;
}
#menu-top-bar li ul {
display: none !important;
visibility: none;
}
#menu-top-bar .td-icon-menu-down {
display: none;
}
.menu-top-container {
margin-right: 0px;
}
.top-header-menu li {
display: list-item;
position: relative;
margin-left: 0;
/* background-color: #dcdcdc; */
border-bottom: .5px solid;
padding-left: 10px;
}
#menu-top-bar {
padding: 0 0 0 0px !important;
min-width: 400px;
}
.td-header-top-menu {
padding: 0px;
}
}
Also, to accomplish the multiple menus thing, I used a separate plugin: Multisite Master Shared Menu
Hello,
Thank you for sharing your results with our community.
