Want to create a new SubMenu line, below Main Menu

Hi artistworkshop. It might take a bit of tweaking but you could try this CSS, either in a child theme style.css file or a plugin like https://www.ads-software.com/plugins/simple-css/ or https://www.ads-software.com/plugins/custom-css-js/:

/* change submenu to horizontal */
@media only screen and (min-width: 720px) {
    .nav ul.sub-menu {
        width: 600px;
    }
    .nav ul.sub-menu li { 
        float: left;
    }
    .nav ul.sub-menu li a {
        display: inline-block;
        text-align: center;
        padding: 0 16px;
        text-decoration: none;
    }
}

The theme uses a media query so the smaller mobile menus aren’t affected when the menus are collapsed. Depending on how many submenu items you have you can increase/decrease the “width” property. The theme CSS also uses absolute positioning to set the submenu under the parent menu item. So, if your parent menu item is over to the right, you may need to add a “left” property to move the submenu left:

.nav ul.sub-menu {
    width: 600px;
    left: -100px;
}

• This reply was modified 8 years, 6 months ago by bdbrown.

Hey Brown!, Thx… works like a charm. Actually, upon testing it, the vertical dropdown menu is better to handle. Or! Is there a way to make the horizontal version not as a pop up but like a stationary menu? Like, when you click on a button in the main menu, a second horizontal sub menu below the main menu is created, which is a menu line that is always there and will not disappear, when you move you mouse?

You’re welcome.

Is there a way to make the horizontal version not as a pop up but like a stationary menu?

Probably but that’s going to involve more work with Javascript/jQuery which is probably more custom coding rather than theme support. And I’m not sure how that would affect the mobile menus. If the default vertical dropdown works for you then I’d stick with that.