Top Bar Text and Social Icons

BB Theme
1

I’m using Top Bar Layout with two columns. On the desktop the right columns are using Text and Social Icons, eg. "Follow Me: " and “Social Icons”. On Mobile the two elements, Text and Social Icon stack one on top of the other so I get three rows in total.

How can I get both the Text and Social Icons on the same row on mobile. They will fit easily on my iPhone.

Thanks.
Doug

2

Hey Doug,

Try adding this CSS snippet.

@media (max-width: 767px) {
  .fl-page-bar .text-right {
    text-align: center;
  }
  .fl-page-bar .fl-page-bar-text, .fl-page-bar .fl-social-icons {
    display: inline-block;
    veritcal-align: middle;
  }
}

Let us know how it goes! :slight_smile:

Ben

3

Thanks Ben. Worked great. I also added to the @media the following to get the left side text to center and stack.

.fl-page-bar .text-left {
    text-align: center;
}

FYI. I think it would be a great idea to collect all the CSS code snippet results somewhere in the Support area that could be easily searched with clear Headings to make it easier to see if there was an existing solution.

Thanks.
Doug

4

Hey Doug,

No worries! Actually, on our Knowledge Base, we already have a CSS Snippets Theme and CSS Snippets Plugin section and we’re slowly filling it up! :slight_smile: If you have any CSS snippet you would like added there just let us know! I’ll try putting this there up ASAP. :slight_smile:

Ben