3rd navigation on the top left

This topic has 21 replies, 4 voices, and was last updated 3 years, 3 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts
May 28, 2022 at 10:26 am #2236313

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?

May 28, 2022 at 10:57 am #2236342

Ying
Staff
Customer Support

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.

May 28, 2022 at 12:14 pm #2236388

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.

May 28, 2022 at 2:52 pm #2236438
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.
May 29, 2022 at 8:34 am #2237029

David
Staff
Customer Support

Hi there,

instead of using this the hook: genearete_before_header try using:

generate_inside_secondary_navigation

May 29, 2022 at 3:03 pm #2237268

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.

May 29, 2022 at 5:01 pm #2237305
Fernando
Customer Support
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!
May 30, 2022 at 12:22 am #2237534

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.

May 30, 2022 at 12:56 am #2237584
Fernando
Customer Support
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.
May 30, 2022 at 1:06 am #2237594

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?

May 30, 2022 at 1:22 am #2237623
Fernando
Customer Support
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.
May 30, 2022 at 2:08 am #2237671
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;
}
```
May 30, 2022 at 11:27 am #2238438
Ying
Staff
Customer Support
Try add!important to
```
.third-navigation ul {
        display: flex;
    }
```
so it becomes:
```
.third-navigation ul {
        display: flex !important;
    }
```
May 30, 2022 at 12:15 pm #2238474

Bernhard

Hi Ying,
it works, thank you 🙂

May 30, 2022 at 1:26 pm #2238522

Bernhard

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

Posts