Home › Forums › Support › Is it possible to make a second 2nd nav, and have diff display rules for each?
- This topic has 23 replies, 2 voices, and was last updated 2 years ago by Fernando.
-
AuthorPosts
-
April 20, 2022 at 7:07 pm #2195390qhraqhra
It seems I can only have one second nav at a time – I want each of my 2nd navs to show up under different conditions. So if I create a second 2nd nav, is this even possible? I worry I can only have one at a time.
April 20, 2022 at 7:35 pm #2195412Fernando Customer SupportHi 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. π
April 20, 2022 at 7:56 pm #2195420qhraqhraSo, 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!
April 20, 2022 at 8:18 pm #2195432Fernando Customer SupportI 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! π
April 20, 2022 at 10:03 pm #2195482qhraqhraIs 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.April 20, 2022 at 11:22 pm #2195533Fernando Customer SupportThis 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! π
April 21, 2022 at 10:33 pm #2196604qhraqhraSo 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?
April 21, 2022 at 10:39 pm #2196607Fernando Customer SupportYou 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! π
April 21, 2022 at 10:51 pm #2196613qhraqhraIs 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?
April 21, 2022 at 11:16 pm #2196630Fernando Customer SupportTo 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. π
April 21, 2022 at 11:27 pm #2196634qhraqhraSo 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
April 21, 2022 at 11:34 pm #2196637Fernando Customer SupportTo 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. π
April 21, 2022 at 11:42 pm #2196642qhraqhraSo 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.
April 21, 2022 at 11:47 pm #2196644qhraqhraAlso 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
April 21, 2022 at 11:52 pm #2196645Fernando Customer SupportI 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. π
-
AuthorPosts
- You must be logged in to reply to this topic.