Is it possible to make a second 2nd nav, and have diff display rules for each?

Hi Qhraqhra,

To clarify, you want are you wanting 3 different navigations in a page? Then, the third navigation only appears on certain pages?

If so, it might be easier to just create a Block Element acting as a third navigation, then hook this Element to the location you prefer.

Kindly let us know. :)

So, some pages will have the primary plus the first 2nd nav,
And other pages will have the primary plus the second 2nd nav.

Also, in case I need to have all 3 navs showing, what is the block element you speak of? lmk how to setup, ty!

I see. It may be good to use a Block Element for this.

Here is the overview of a Block Element: https://docs.generatepress.com/article/block-element-overview/

For instance, using GenerateBlocks(free add-on plugin for GeneratePress), I created a Container Block with Headline Blocks inside it within a Block Element. The Headline Blocks are the menu links, and they are set to Inline Width: https://share.getcloudapp.com/L1uRyDrZ

With a Block Element, you may choose the pages where the Block Element will be displayed through the Display Rules. You may also exclude pages as well. Moreover, for my site, I hooked the Block Element to before_header as such: https://share.getcloudapp.com/eDu5erRG

This is how it looks like on my end: https://share.getcloudapp.com/X6uEXKbW

Hope this helps! :)

Is there a way to "bold" a nav element, or make the background color of a certain nav element different so that that one element stands out?
For example, on my site I want a "preorder now" page link in my nav, but I want it to stand out.

This is possible. Here is a CSS you may try adding through Appearance > Customize > Additional CSS:

div#primary-menu ul li:nth-child(5) a {
    font-weight: bold;
    border: solid 1px #000;
    line-height: 3;
    background-color: rgb(200,0,0);
}

Kindly modify the values to your preference.

Hope this helps! :)

So slight change of plan - I made a block element as you said (with just one link as an h1) and set the hook name to after_primary_menu, but I would like it to show up just like how my secondary menu does in terms of appearance.

So basically, I want there to be a stripe of color behind the text, with the stripe stretching fullwidth. Currently I can only change the background color of the text itself in the typography, but cannot make the whole thing a "stripe" that looks like a proper navigation.

In the image here x, I want the "preorder" text to stand out by putting a black stripe behind it, right under my main menu. Lmk how to do this, thanks!

Also, it seems I cannot bold the "preorder" text or make other aesthetic changes to it (when I change the typography it seems to not reflect on the frontend) - is there a way for me to increase font size or bold it?

You can place the Headline Block within a Container Block, and then set a Background Color to the Container Block.

Reference: https://docs.generateblocks.com/article/container-overview/#colors

Hope this helps! :)

Is there a way to get the link to center vertically when doing this, too? Just did that and it looks like its floating at the top, currently its only horizontally centered. Seems changing the padding does not work even though I change it in typography.

Also, it seems I cannot bold the “preorder” text or make other aesthetic changes to it (when I change the typography it seems to not reflect on the frontend) – is there a way for me to increase font size or bold it?

To center the text vertically, kindly remove the bottom margin of the Headline Block.

If you want to add spacing, you may do so by adding equal top and bottom padding to the Container Block.

To be able to alter the font size and other aesthetics of the font, kindly try hooking the Block Element to after_navigation instead.

Kindly let us know how it goes. :)

So when i change it to "after_navigation", I lose the horizontal centering and don't see an option to change this in typography, etc. Lmk how to center, not sure where it is anymore.

Also, when this block shows up between the primary and secondary navs (when I want to show 3 nav's, with this block being one of them), there is a white empty space between this block and the second nav - is there a way to stack the navs so that this white bar disappears? Thanks

To center it, kindly select the Headline Button and click the alignment icon, and then set it to align text center as such: https://share.getcloudapp.com/eDu5KjRo

The margin which adds spacing making the text not centered vertically can be found here: https://share.getcloudapp.com/04uE8AxN

Kindly let us know how it goes. :)

So I did both those things, but the mobile version of the site has the text still not centered vetically, it instead sinks to the bottom. It shows up just fine on desktop though. Lmk how to get it to center on mobile, too. Because the margin is at 0 now as you showed.

Also is there a way to make this sticky when people scroll down?

Another q, when I have three navs showing (with this one showing btwn my primary and 2nd nav), there is an empty white bar between the block element we're working on, and the 2nd nav. Is there a way to get rid of this? So it looks "stacked" with nothing in between the navs. Thanks

I see. Can you kindly check if there is a padding set on the Container Block on Mobile view as such: https://share.getcloudapp.com/rRu1DGBm

If there is, try removing the value.

Kindly let us know. :)