[Resolved] Small menu oddity

Home Forums Support [Resolved] Small menu oddity

Home Forums Support Small menu oddity

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1674472
    Randy

    Nice to see several new names in the support expert staff! Welcome.

    I have a perplexing problem. I have a number of sites under the umbrella of a flagship. The smaller sites have, in the Primary menu, a selection to move to the main web site.

    Example: https://StellaAwards.com

    On the right side of the primary menu bar, there’s a “a This is True project” selection.

    The key is, it’s on the right side. I can’t remember if I learned that trick here or elsewhere, but it’s done with a little CSS: use Inspect to find the element number of that particular menu item, and then add to the stylesheet,

    li#menu-item-1648 {
    	float: right;
    }

    But that’s not working on my latest site: https://what-its-like-to.com (still not launched, but “live”). It won’t move to the right. Even looking at Inspect it’s “calculated” to be flush-right, but as you can see it’s not. It uses the same method as the other sites, so I don’t understand why, especially when it works on every other site.

    You’ll note this site uses Dispatch from the GP Site Library, but that’s not the difference: it was the same way in vanilla GP for this site also (i.e., before I applied Dispatch to the site). I even tried the hammer “!important”, but that didn’t do it either. I’d love to fix this before I launch. Thanks!

    #1674473
    Leo
    Staff
    Customer Support

    Hi there,

    This one is using Float structure: https://stellaawards.com/

    And this one is using Flexbox structure: https://what-its-like-to.com/

    You can check under Customizer > General.

    With Flexbox, try this method instead:
    https://docs.generatepress.com/article/generate_menu_bar_items/

    #1674481
    Randy

    1) Dang you’re quick, Leo!

    2) Huh. I didn’t set that purposefully. I’ll have to research that and see what it does. Resetting to Float doesn’t seem to have changed the layout or function — but it did of course fix the issue here. Glad to know I’m not crazy. Well, about that at least!

    Thanks much.

    #1674555
    Leo
    Staff
    Customer Support

    Flexbox is the default for new installs – it’s better πŸ™‚

    The better solution would be to switch both sites to Flex and use the hook I mentioned above.

    Or at least do that for the new site πŸ™‚

    #1675378
    Randy

    Ah, default: that’s why it was a “sudden” change (for me — my last new install was before v3).

    Now that I’ve read about flexbox, I agree it’s better! I’ll convert the rest of the sites over the next few weeks. Tom had me at “lighter.” πŸ™‚

    That said, I’m unclear specifically how to use the Hook element for this menu tweak:

    <span class="menu-bar-item">
        <a href="#">Your icon HTML</a>
    </span>

    What exactly would I put in there for that specific menu item that’s currently correct (pre-flexbox) on the subject site?

    #1675431
    Leo
    Staff
    Customer Support

    You would replace # with the link for the button.

    And replace Your icon HTML with the actual text you want for the button.

    I would recommend taking a look at the video on the doc page.

    #1675551
    Randy

    Thanks, Leo, all set.

    #1676353
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.