[Resolved] Mobile: Integrate second Menu in main menu

[Tobias]

Hello, is it possible to integrate the secondary navigation in the mobile view into the main menu so that you don’t have to open it separately? The menu items should then simply appear under those of the main navigation. But not one below the other but side by side with line breaks like here at the bottom in the mobile view: https://www.computerbase.de/

[Ying]

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

[Tobias]

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.

[Ying]

Try this CSS:

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

[Tobias]

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?

[Ying]

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?

[Tobias]

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 😉

[Ying]

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 🙂

[Tobias]

Here is the login.

[Ying]

Can you share the login link as well?

[Tobias]

Ah sorry 😉

[Ying]

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;
}

[Tobias]

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 😉

[Ying]

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;
}

[Tobias]

Thats it. Thank you for this awesome support.

[Author]

Posts