Trying to make a Responsive navbar

1

Hi there!

So I’m having an issue with making a responsive nav bar for a portfolio piece, I have some icons from Font Awesome and I honestly have no idea how to go about moving the text from below the icon to beside the icon. It’s probably an easy fix but for the life of me I have no clue on what I’m missing here.

Here’s the Pen and please do keep in mind that everything in here is just placeholder until I can get everything in order so I can actually get to styling it.

Any help would be appreciated! Thanks for your time and have a great day!

2

Hi there,

You should move the icon inside of the link. Right now its creating a line break between your icon and link. This should work:

      <li class="nav-item">
        
          <a href="#lorem" class="nav-link">
            <i class="fas fa-bug fa-3x"></i><span class="link-text">Lorem?</span>
          </a>
      </li>
1 Like
3

It worked! Thank you so much!

1 Like
4

My pleasure, happy to help.

1 Like
5

Also, just to note if you dont want the icon to be a part of the clickable link, then you will need to use additional CSS to make them appear next to each other. Its slightly more complex.

I made an assumption that you wanted to be able to click on the icon as well as the text portion of the link.

1 Like
6

Your assumption would be correct! I think once I have a better understanding of everything I’ll take a crack at it. Thank you for the advice, very much appreciated.

1 Like