Archived topic
Small menu oddity
7 replies · Started by Randy on February 26, 2021
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!
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/
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.
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 :)
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?
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.
Thanks, Leo, all set.
No problem :)
