[Resolved] Double Navigation

[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

[Elvin]

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

[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

[Leo]

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 🙂

[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

[David]

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?

[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

[David]

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.

[Erika]

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

[David]

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

[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

[David]

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 */
}

[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

[David]

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

[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

[Author]

Posts