[Resolved] 3rd navigation on the top left

[Bernhard]

Hello,
I’d like to insert a 3rd navigation on the top left of my site and I want to ask, if my actual setup for the navigation is still state of the art. The configuration was made at that time (~2019-20) according to your valuable support information.

Actually the primary navigation is empty and used to configure the typography of the hamburger icon. Then I use the off canvas menu (slideout) and the 2ary menu on the top right. How shall I proceed?

[Ying]

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.

[Bernhard]

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.

[Bernhard]

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.

[David]

Hi there,

instead of using this the hook: genearete_before_header try using:

generate_inside_secondary_navigation

[Bernhard]

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.

[Fernando]

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!

[Bernhard]

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.

[Fernando]

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.

[Bernhard]

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?

[Fernando]

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.

[Bernhard]

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

[Ying]

Try add!important to

.third-navigation ul {
        display: flex;
    }

so it becomes:

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

[Bernhard]

Hi Ying,
it works, thank you 🙂

[Bernhard]

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

[Author]

Posts