Archived topic
Make links be side-by-side in top header
5 replies · Started by Michelle on April 3, 2022
I have two links on my top bar. One is put there via a plugin that allows people to log in/log out (entered into a Top Bar Menu). The other link is html that triggers a lightbox containing an invitation to sign up for a monthly newsletter. I don't know how to make them sit side-by-side on the top bar so they look like a navigation. As it is now, one sits on the right and one on the left because I have them in the top bar customizer as separate widgets.
Can I combine the two widgets somehow?
Hi Michelle,
Try this CSS:
.top-bar-align-right .widget:first-child {
margin-left: 20px;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
You can adjust the px number as you see fit.
Let me know if this helps :)
Hi Leo. The code mostly worked... It moved the "Get Email Updates" link, but not the Member Login/Logout link. Changing the pixels only moved the one link...
Do you want the topbar items to align right? If so, try this:
1. Go to customizer > layout > topbar, set the padding right to 40px.
2. Add this CSS as well:
.top-bar .inside-top-bar {
justify-content: right;
}Oh YEAH! That is spot on. Thank you, Ying.
Is it possible to make the links bold? I was able to make the html one bold, but not sure how to make the Member Login/logout link bold, as it is php I think. ??
No problem Michelle :)
