[Resolved] Mobile: Integrate second Menu in main menu

Home Forums Support [Resolved] Mobile: Integrate second Menu in main menu

Home Forums Support Mobile: Integrate second Menu in main menu

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2168143
    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/

    #2168220
    Ying
    Staff
    Customer Support

    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

    #2170261
    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.

    #2170264
    Ying
    Staff
    Customer Support

    Try this CSS:

    @media (max-width: 768px) {
        nav#secondary-navigation {
            display: none;
        }
    }
    #2170287
    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?

    #2170296
    Ying
    Staff
    Customer Support

    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?

    #2170300
    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 πŸ˜‰

    #2170307
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2170311
    Tobias

    Here is the login.

    #2170350
    Ying
    Staff
    Customer Support

    Can you share the login link as well?

    #2170351
    Tobias

    Ah sorry πŸ˜‰

    #2170367
    Ying
    Staff
    Customer Support

    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;
    }
    #2170400
    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 πŸ˜‰

    #2170410
    Ying
    Staff
    Customer Support

    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;
    }
    #2170656
    Tobias

    Thats it. Thank you for this awesome support.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.