[Resolved] Double Navigation

Home Forums Support [Resolved] Double Navigation

Home Forums Support Double Navigation

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1566350
    Erika

    Hi there,
    I have the task to create a navigation that includes two menus and the site-title should be displayed by scroll down only. Based on my reasearch in the Documentation and Support topics, there are two ways to create such a menu:
    1) I use the top bar and place the two navigations as widgets. This displayed first well. One menu to the left, one menu to the right. Now the menus are aligned into the middle and how do I place the title near the left navigation or in the middle by scroll down?
    This is the first version.
    Or if I use the second way a different problem:
    2) I use the header as navigation just like you describe in the documentation and activate sticky navigation, add logo or the company name as image. However, the order of the elements is not right. The logo should display after the left menu by scroll down.
    This is the second version.
    Which way do you suggest is the better way and how do I solve the upcoming problem?

    Thanks, Erika

    #1566682
    Elvin
    Staff
    Customer Support

    Hi,

    I’m not exactly sure I understand what you’re trying to do.

    Can you explain a bit more? Perhaps link us to a reference site which a navbar you’re trying to replicate?

    2) I use the header as navigation just like you describe in the documentation and activate sticky navigation, add logo or the company name as image. However, the order of the elements is not right. The logo should display after the left menu by scroll down.

    For #2, you can change the order of the header contents with CSS, if you’re using flexbox, we can use CSS’s order property to change the order between the logo and the supposed left menu.

    Tip: Perhaps you’re trying to do something like this?
    https://generatepress.com/forums/topic/split-menus-into-two-separate-lists/#post-1519913

    A wise man once said:
    "Have you cleared your cache?"

    #1572606
    Erika

    Hi Elvin,

    URL is in the private information.

    It is similar to the other post what I am trying to do. However, after adding the Snippet and the CSS I have now the primary menu double? What do I miss here? However the menu-item-separator seemed to be an easier solution.

    I should have a menu with one link aligned to the left and five links on the right. No logo in the middle.
    Menu after logo only once.

    Logo and site title should only appear when you scroll down AFTER the link on the left.

    Suggestions?

    Thanks, Erika

    #1573334
    Leo
    Staff
    Customer Support

    Hey Erika,

    Sorry I’m a hard time picturing what you are trying to achieve as well.

    Are you able to provide a mockup or an example?

    Thanks 🙂

    #1573967
    Erika

    Hi Leo,

    I made a grafic, see the URL in private information.

    I think it is actually a rather simple problem with different ways to solve it, however I got abug here.

    Thanks, Erika

    #1574151
    David
    Staff
    Customer Support

    Hi there,

    how is the second Navigation being addd ? I am seeing an element with a class of: menu-hauptmenue-oben-container inside the navigation. This is not part of the theme? Do you have any functions / hooks or plugins for adding menus?

    #1575522
    Erika

    Hi there,

    it seems that my different approaches were mixed up here and caused a confusion. I simply could not find how that element was added.

    I have reset the settings and let´s start again.

    I have three menus:
    – Hauptmenu oben = primary menu
    – Kundenbereich = secondary menu
    – Menu unten = rechtliches (this menu we can disregard, I use this one in the footer for the legals)

    The task is to put “Hauptmenu oben” in the navigation to the right and put “Kundenbereich” in the navigation to the left. No logo between them.

    The navigation should be sticky and near “Kundenbereich” a text should appear if you scroll down.

    Now I have the settings:
    Appearance –> Layout –> Header
    Use navigation as header, sticky: on

    Appearance –> Layout –> Primary navigation
    navigation aligned to the right

    Appearance –> Layout –> Secondary navigation
    set to no navigation

    In one Support topic Tom suggested a way to use only one menu in the navigation and put the left item “Kundenbereich” as first menu item, then a separator follows with empty link and a class menu-list-separator (or something like that) and then the items follow for the right navigation. This seemed to me a good way. Unfortunetly I can´t find that support topic anymore 🙁 and I am not sure if that solution would solve the scroll down problem…

    Then Elvin suggested above which then caused a double menu appearance and I could not find the bug. After resetting I tried this again, but then it simply did not perform, which means, I still have somewhere a setting which is not properly set.

    So if we start again from scratch with the setting NOW: what do you suggest, how do I go about it?

    Thanks, Erika

    #1575729
    David
    Staff
    Customer Support

    My thoughts are this – all of the elements you want displayed on your sticky navigation should be included in the Primary Hauptmenu oben menu. This includes the text der Peter Katesch GmbH.

    For the Kundenbereich item add the link and give it a CSS class of align-left
    For the der Peter Katesch GmbH – add this as the menu label, give it a URL of # and give that a CSS class of nav-title

    This article explains how to add CSS classes to menu items:

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then remove the Logo from the Customizer > Layout > Sticky Navigation.

    Once that is done, let me know and ill provide the CSS to style the navigation as you require. After that we can look at the Mobile Menu.

    #1575743
    Erika

    Hi David,
    awesome, I like this idea and I´m done 🙂
    Erika

    #1575817
    David
    Staff
    Customer Support

    I am not seeing the extra menu items in the Primary menu?

    ie, these items:

    For the Kundenbereich item add the link and give it a CSS class of align-left
    For the der Peter Katesch GmbH – add this as the menu label, give it a URL of # and give that a CSS class of nav-title

    #1576480
    Erika

    Hi David,

    that is strange, I added them with the classes and they are there… I can see them 😉 You want to take another look?

    Thanks, Erika

    #1577192
    David
    Staff
    Customer Support

    OK 🙂
    Try this CSS:

    /* for navigation to full width */
    .main-navigation, .main-navigation .main-nav {
        flex: 1;
    }
    /* Hide nav title when static and for space between items */
    .main-navigation li.nav-title {
        opacity: 0;
        margin-right: auto;
        pointer-events: none;
        font-size: 20px;
        font-weight: 700;
        transition: opacity 0.3s ease-in;
    }
    /* Show nav tilt when stuck */
    .main-navigation.is_stuck li.nav-title {
        opacity: 1;
    }
    /* Style Main Title */
    .main-navigation li.nav-title a {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        pointer-events: none; /* Makes link unclickable */
    }
    #1579482
    Erika

    Hi David,

    that´s clean & nice. Works well.

    Let´s see mobile.
    I already did this:
    – Set the responsive breakpoint to 800px;
    – aligned the menu-toggle to the right (however, it seems to work only in the preview, but I can´t see it on my phone) and set height

    /*only tablet*/

    @media
    (min-width: 800px) and (max-width: 1024px) {
    button.menu-toggle {
    text-align: right;
    }

    #mobile-header.toggled .main-nav > ul, #mobile-header .menu-toggle, #mobile-header .mobile-bar-items {
    height: 50px;
    }
    }

    /*only mobile*/

    @media
    (max-width: 800px) {
    button.menu-toggle {
    text-align: right;
    }

    #mobile-header.toggled .main-nav > ul, #mobile-header .menu-toggle, #mobile-header .mobile-bar-items {
    height: 40px;
    }
    }

    Menu-Toggle should display on tablet and mobile on the right.
    Drop-down-Menu centered.
    Menu item with the class “align-left” should display on the left. Would be nice to display the logo both on tablet and mobile before Kundenbereich.
    Menu item nav-title hides on mobile.
    No difference if sticky or not, Logo + Kundenbereich should show in each cases on all devices.

    Thanks 🙂

    Erika

    #1579752
    David
    Staff
    Customer Support

    Can you remove the CSS you have added for the Mobile/Table menu options.
    Then set the Customizer > Layout > Primary Navigation – mobile menu breakpoint to 1024.
    In Customizer > Layout > Header – add your Mobile Logo.

    Once thats done ill figure out the rest including adding the Site Title

    #1579769
    Erika

    Hi David,

    I am done. Basically, we have the logo already in the mobile navigation.
    What if I create the Logo with Logo+Kundenbereich? In this case we would only need to link the Logo+Text to the proper link… I am not sure, but that might (or might not) be a rather simple way.

    Thanks for thinking with me 😉

    Erika

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