[Resolved] Make links be side-by-side in top header

Home Forums Support [Resolved] Make links be side-by-side in top header

Home Forums Support Make links be side-by-side in top header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2176913
    Michelle

    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?

    #2176926
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2177807
    Michelle

    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…

    #2177826
    Ying
    Staff
    Customer Support

    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;
    }
    #2177880
    Michelle

    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. ??

    #2177892
    Ying
    Staff
    Customer Support

    No problem Michelle ๐Ÿ™‚

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