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

Home Forums Support [Resolved] Is it possible to make a second 2nd nav, and have diff display rules for each?

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

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2195390
    qhraqhra

    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.

    #2195412
    Fernando
    Customer Support

    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. πŸ™‚

    #2195420
    qhraqhra

    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!

    #2195432
    Fernando
    Customer Support

    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! πŸ™‚

    #2195482
    qhraqhra

    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.

    #2195533
    Fernando
    Customer Support

    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! πŸ™‚

    #2196604
    qhraqhra

    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?

    #2196607
    Fernando
    Customer Support

    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! πŸ™‚

    #2196613
    qhraqhra

    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?

    #2196630
    Fernando
    Customer Support

    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. πŸ™‚

    #2196634
    qhraqhra

    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

    #2196637
    Fernando
    Customer Support

    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. πŸ™‚

    #2196642
    qhraqhra

    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.

    #2196644
    qhraqhra

    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

    #2196645
    Fernando
    Customer Support

    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. πŸ™‚

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.