Mobile: Integrate second Menu in main menu

Hi Tobias,

You can add these menu items to the primary navigation at appearance > menus.

For those menu items that you only want them to show on mobile, you can addhide-on-desktop class to them.

Here's an article introducing how to add custom class to menu items:
https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

Ok, i go for css class hide-on-desktop for all menu items that i add additional to the main navigation from the second navigation and add css class hide-on-mobile to all menu items in the second navigation that i want to have on desktop. That works.

How can i hide the second navigation bar on mobile? It's shown but empty on drop down ;)

Thanks.

Try this CSS:

@media (max-width: 768px) {
    nav#secondary-navigation {
        display: none;
    }
}

Perfect, that works. Finally how can i add different font-weight to the menu items from the secondary navigation on mobile? Is it possible to add more than one css class to a menu item?

Can you tell me how to add a horizontal dividing line between the items from the main navigation and the items with the css class hide-on-desktop?

Is it possible to add more than one css class to a menu item?

Yes, you can add as many as you want, sperate them by space.

Finally how can i add different font-weight to the menu items from the secondary navigation on mobile?

I thought you just hide your secondary navigation on mobile.

Can you tell me how to add a horizontal dividing line between the items from the main navigation and the items with the css class hide-on-desktop?

Can you link me to your site?

Can you link me to your site?

Its in coming soon mode at this moment and not released.

I thought you just hide your secondary navigation on mobile.

I want to Display the imens from the second menu after the main menu on mobile and hide the menu bar from the second menu on mobile. That works. Now i want to display a line between the items from the main navigation and the items that i added with the css class hide on desktop and give them a different font weight. I hope you know what i mean ;)

Well it requires custom CSS and I have to see the live site to provide the CSS.

You can send login details using private info field, the info added there will only be seen by support team :)

Here is the login.

Can you share the login link as well?

Ah sorry ;)

Try this CSS:

.main-navigation.toggled .main-nav > ul > li:not(.hide-on-desktop) + li.hide-on-desktop {
    border-top: 2px solid white;
}

And this for the font weight:

.main-navigation.toggled .main-nav > ul > li.menu-item.hide-on-desktop a {
    font-weight: 100;
}

Many thanks for that. One more thing: How can i get a little more margin at the line? Maybe 20px top and bottom. After that, were done ;)

Try modify the 1st CSS to this:

.main-navigation.toggled .main-nav > ul > li:not(.hide-on-desktop) + li.hide-on-desktop {
    border-top: 1px solid #292929;
    padding-top: 20px;
    margin-top: 20px;
}

Thats it. Thank you for this awesome support.