3rd navigation on the top left

Hi there,

You can give this solution a try:
https://generatepress.com/forums/topic/add-third-navigation-menu-gpp-1-8/#post-873043

For the step 2, choose genearete_before_header hook instead.

Hi Ying,
ok, third menu created :) . I inserted this CSS but the 3rd navigation (Florenz Venedig) is now left above the navigation logo, on my test site.

How can I place it on the left and same line of the 2ary navigation (on the right), font size 16 px?

Thank you.

Hi Ying,
I played a little with the CSS, but I'm not sure if this is a good solution:

.third-navigation ul {
    list-style-type: none;
    margin: 13px;
}

.third-navigation ul {
    display: flex;
    justify-content: left;
}

.third-navigation .menu > li:nth-child(2) {
    margin-left: 0px;
}

.third-navigation a {
    padding: 0px 7px;
    line-height: 35px;
	font-size: 16px;
    color: #931b31;
}

One thing disturbing me is that I had to define a margin of 13px because of 7 px padding, which makes a total of 20.

Then, I don't know how to place it on the same row of the secondary menu.

Hi there,

instead of using this the hook: genearete_before_header try using:

generate_inside_secondary_navigation

Hi David, now it's more or less on the same height of the 2ary navigation but in the center above the navigation logo. It shall be on the left.
Thank you.

Hi Bernhard,

Here is a CSS you may try adding in Appearance > Customize > Additional CSS:

nav#secondary-navigation .inside-navigation  {
    justify-content: space-between;
}

Kindly let us know how it goes!

Hi Fernando,
the position is ok and on desktop it looks fine. But on mobile the 3rd navigation is now vertical, it shall be horizontal.

I see.

You could try adding this CSS:

@media (max-width: 768px) {
    .secondary-navigation ul {
        display: flex;
    }
}

As is, they wont fit in one line though. If you want them centered, use this instead:

@media (max-width: 768px) {
    .third-navigation ul {
        display: flex;
    }

    nav#secondary-navigation .inside-navigation {
        justify-content: center;
    }
}

Kindly let us know how it goes.

Hi Fernando,
no change.

I observed, that the hook genearete_before_header would be fine on mobile and the hook generate_inside_secondary_navigation works well on desktop. Is it possible to create a display rule for this?

Yes, that would be possible, and you would need PHP code to achieve such. It might be bulkier and less efficient than doing it through CSS as well.

With the CSS I provided, here is how it should look: https://share.getcloudapp.com/BluG0OYQ

So your CSS along with the first one I provided would be:

nav#secondary-navigation .inside-navigation  {
    justify-content: space-between;
}

@media (max-width: 768px) {
    .third-navigation ul {
        display: flex;
    }

    nav#secondary-navigation .inside-navigation {
        justify-content: center;
    }
}

Kindly let us know what you prefer.

Strange, am I something missing in the CSS? This is how it looks https://imgur.com/t8uHOHJ

This is my CSS:

nav#secondary-navigation .inside-navigation  {
    justify-content: space-between;
}

@media (max-width: 768px) {
    .third-navigation ul {
        display: flex;
    }

    nav#secondary-navigation .inside-navigation {
        justify-content: center;
    }
}

.third-navigation ul {
    list-style-type: none;
    margin: 13px;
}

.third-navigation ul {
    display: flex;
    justify-content: left;
}

.third-navigation .menu > li:nth-child(2) {
    margin-left: 0px;
}

.third-navigation a {
    padding: 0px 7px;
    line-height: 35px;
	font-size: 16px;
    color: #931b31;
}

Try add!important to

.third-navigation ul {
        display: flex;
    }

so it becomes:

.third-navigation ul {
        display: flex !important;
    }

Hi Ying,
it works, thank you :)

Excuse me, one more question: how can I set the background color on hover (fcc233)?