Bootstrap 4 Right Nav Menu

HTML & CSS
1

Hey people,

I am having a problem with my header in Bootstrap the left menu is working but I am trying to create social icons on the right side but this is the result I am getting:

image
image1780×83 8.54 KB

below is my code i am using:

<!--Nav Menu & Logo Start -->
        <nav class="navbar navbar-expand-md navbar-dark bg-dark top">
          <a class="navbar-brand" href="#">
              <img src="Assets/Images/Logo/CMAMainLogo.svg" width="128px" height="58px" alt="CMA Main Logo">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    
          <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">HOME</span></a> <!--Home Nav Button-->
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://example.com">CAREERS</a><!--Careers Nav Button-->
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://example.com">BLOG</a><!--Blog Nav Button-->
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link" href="https://example.com">CONTACTS</a><!--Contacts Nav Button-->
              </li>
            </ul>
            <!-- Navbar Right Social Icons-->
            <ul class="navbar navbar-right">
                <li>
                    <a href="#">
                        <i class="fa fa-phone"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-envelope"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.facebook.com/thecontentmarketingagency" target="_blank"><i class="fa fa-facebook"></i>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/rewritebusiness" target="_blank"><i class="fa fa-twitter"></i></a></li>
               <li><a href="https://www.linkedin.com/company/the-content-marketing-agency" target="_blank">
                        <i class="fa fa-linkedin"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.instagram.com/cma_agency" target="_blank"><i class="fa fa-instagram"></i></a></li>
               <li><a href="https://plus.google.com/u/0/105715615536876644371/posts" target="_blank ">
                        <i class="fa fa-google-plus"></i>
                    </a>
                </li>
            </ul>
          </div>
        </nav>
        <!--Nav Menu & Logo End -->

Thanks

2

What is the result you getting?

3

If you look on the imgur image i have linked you can just see on the right side of the header the icons are squares apart from the mail and phone icon.

4

I had to download the image and I can’t see anything. What I did find out is default color is black.

Since I’m only familiar with BS3, I looked at the BS4 docs to see they have no icon library https://getbootstrap.com/docs/4.0/extend/icons/
I assume these are Font Awesome icons.

Not sure if you’re familiar with W3Schools, but they have helped me tons over the years.

Check out these links:

Editor:

Icon List:
https://www.w3schools.com/icons/icons_reference.asp

Other info:
https://www.w3schools.com/icons/

I’m going to add one more…
Icons with links, because your code looks a bit different:
https://www.w3schools.com/howto/howto_css_social_media_buttons.asp

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.