[Support request] Keeping Fontawesome icons together with text on top bar

Home Forums Support Keeping Fontawesome icons together with text on top bar

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #315020
    Mustafa

    Hi,

    I’m trying to get a fontawesome icon to display together with the text that goes with it in the top bar widget in mobile view however the email icon is showing on a different line to the email address.

    Have a look here

    Is there any way to keep them together on the same line for e.g. in mobile view the email address drops down to the next line. Can I do anything to make the email icon stay with the email address on the 2nd line?

    #315059
    Tom
    Lead Developer
    Lead Developer

    Hmm, I think you would have to break the items into two separate lines as there’s not enough space.

    Wrap each item in a span:

    <span class="top-bar-phone">Phone number stuff here</span> <span class="top-bar-email">Email stuff here</span>

    Then add this CSS:

    @media (max-width: 768px) {
        .top-bar-phone,
        .top-bar-email {
            display: block;
        }
    }
    #315082
    Mustafa

    Thanks for that.

    Works great!

    If I needed to add more items to the top bar like a social media icon or other details to the top bar what format would I need to use to make it drop down on each line on mobile view?

    #315168
    Tom
    Lead Developer
    Lead Developer

    You could use one class:

    <span class="top-bar-item">Phone number stuff here</span> <span class="top-bar-item">Email stuff here</span> <span class="top-bar-item">Social stuff here</span>

    Then your CSS would be:

    @media (max-width: 768px) {
        .top-bar-item {
            display: block;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.