Archived topic
Keeping Fontawesome icons together with text on top bar
3 replies · Started by Mustafa on May 7, 2017
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?
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;
}
}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?
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;
}
}