Problem with positioning icon html and css

Question

I want my facebook icon to be at the top right above the navbar links, As you can see it's over the left .. I have tried putting it inside the navbar elements and outside of them .. I have tried all different positioning codes and just nothing will work. Any help would be great .. I have included my whole code in codepen .. I hope that's right.

https://codepen.io/hollyj24/pen/XWdRZWd

<nav class="navbar navbar-expand-lg">
      <a href="#"><img class="navbar-brand" src="images\logo.png"></a>
      <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="#navbarNav">
        <a href="https://www.facebook.com/pawsforwalk" target="_blank"><i class="fab fa-facebook-square fa-2x"></i></a>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#pricing">Pricing <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonials">Testimonials</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#About">About</a>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

Answer 1

You are not applying any CSS to the FB links, so it is in the default position.

If you give the a element a class or id:

<a id="fbiconlink" href="https://www.facebook.com/pawsforwalk" target="_blank">
    <i class="fab fa-facebook-square fa-2x"></i>
</a>

Now we can target it in our CSS to place it wherever we want:

#fbiconlink {
  position: absolute;
  right: 1.5rem;    
  top:20px; 
}

As you want it in a specific location, we can use absolute position. This places it 1.5rem from the right - this is the right padding of the last link (.5rem) + right padding of the navbar (1rem) so that it is in line with the last link.

See a working example (Click on Full Page to see it with the non-collapsed menu)

 body { font-family: monospace; font-family: "Quicksand", sans-serif; } h1, h2, h3, h4, h5, h6 { color: #fff; font-family: "Podkova"; font-weight: 800; } em { color: #fff; } #title { background-color: #71a6c9; } .carousel-caption { position: relative; left: 0; top: 0; font-size: 1.5rem; } /* headings */ .big-heading { color: #fff; text-align: left; padding: 0 20px; } .title-p { color: #fff; text-align: left; font-family: "Quicksand"; padding: 0 20px; padding-top: 50px; } .blue-headings { color: #71a6c9; text-align: center; padding: 20px; padding-top: 50px; font-size: 3rem; } .white-headings { color: #fff; text-align: center; font-size: 3rem; padding-top: 50px; padding-bottom: 20px; } .fa-facebook-square { color: #fff; } /* Navbar */ .navbar { background-color: #3282b8; padding: 10px 20px 10px 35px; } .navbar-brand { height: 150px; } .nav-link { font-family: "quicksand"; color: #fff; font-size: 1rem; padding-top: 100px; } .main-head { padding: 100px 30px 25px 30px; } /* Pricing Section */ .pricing-column { text-align: center; padding: 30px 15px 100px 15px; } .card { border-color: #71a6c9; } .card-header { background-color: #71a6c9; } .let-out { padding: 40px 20px 20px 40px; } .let-out-btn { margin-top: 35px; color: #71a6c9; } .btn { border-color: #71a6c9; color: #71a6c9; font-family: "podkova"; font-size: 1.75rem; } .btn:hover { background-color: #71a6c9; border-color: #71a6c9; } /* Testimonial Section */ #testimonials, .testimonial-container { background-color: #71a6c9; } .testimonial-container { padding-left: 200px; padding-right: 200px; } #testimonial-carousel { height: 300px; width: 100%; } .testimonial-text { color: #fff; text-align: center; font-size: 1.25rem; font-weight: 600; line-height: 1.5; } .testimonial-name { color: #fff; font-size: 1rem; text-align: center; } .carousel-control-prev { margin-left: -100px; } .carousel-control-next { margin-right: -100px; } .form-group-test { padding-bottom: 13px; } /* About Section */ .about-img { border-radius: 15px 50px; width: auto; height: 200px; } .about-box { text-align: center; color: #71a6c9; font-size: 1.25rem; font-weight: 600; } .about-text { padding: 20px 75px; } .about-heading { color: #71a6c9; text-align: center; padding: 50px 20px; font-size: 3rem; } /* Contact Section */ #contact { background-color: #71a6c9; } .contact-headings { font-size: 2rem; text-align: center; } .form-box { padding: 50px; color: #fff; font-family: "podkova"; } .contact-btn { border-color: #fff; color: #fff; font-family: "podkova"; font-size: 1.75rem; } .contact-btn:hover { background-color: #fff; border-color: #fff; color: #71a6c9; } .icons { color: #fff; text-align: center; } /* Footer Section */ #footer { padding: 20px; background-color: #3282b8; text-align: center; } .footer-icons { color: #fff; padding: 10px; } .footer-text { color: #fff; text-align: center; } #fbiconlink { position: absolute; right: 1.5rem; top:20px; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel='icon' href='images\\favicon (1).ico' type='image/x-icon' /> <title>Paws for Walk</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Podkova:wght@400;500;600;700;800&family=Quicksand&display=swap" rel="stylesheet"> <!-- CSS Stylesheets --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/d584b0247e.js" crossorigin="anonymous"></script> <!-- Bootstrap Scripts --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <section id="title"> <!-- Navbar --> <nav class="navbar navbar-expand-lg"> <a href="#"><img class="navbar-brand" src="images\\logo.png"></a> <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="#navbarNav"> <a id="fbiconlink" href="https://www.facebook.com/pawsforwalk" target="_blank"><i class="fab fa-facebook-square fa-2x"></i></a> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#pricing">Pricing <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#testimonials">Testimonials</a> </li> <li class="nav-item"> <a class="nav-link" href="#About">About</a> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> <!-- Title --> <div class="main-head container-fluid"> <div class="row"> <div class="col-lg-6"> <h1 class="big-heading">Professional dog walking service - <em class="tagline">We go the extra mile.</em></h1> <h4 class="title-p">Based in and around Market Rasen with competitive pricing.</h4> </div> <!-- Img-slideshow --> <div class="col-lg-6"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images\\logo.png" class="d-block w-100" alt="logo"> <div class="carousel-caption"> <p>My Logo</p> </div> </div> <div class="carousel-item"> <img src="images\\chris&huck.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Me & Hucks</p> </div> </div> <div class="carousel-item"> <img src="images\\lewi.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Lewi</p> </div> </div> <div class="carousel-item"> <img src="images\\poppy.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Poppy</p> </div> </div> <div class="carousel-item"> <img src="images\\poppy&freddy.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Poppy & Freddy</p> </div> </div> <div class="carousel-item"> <img src="images\\teddy.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Teddy</p> </div> </div> <div class="carousel-item"> <img src="images\\bella.jpg" class="d-block w-100" alt="dog-img"> <div class="carousel-caption"> <p>Bella</p> </div> </div> </div> </a> </div> </div> </div> </section> <!-- Pricing --> <section id="pricing"> <h2 class="blue-headings">Pricing</h2> <div class="container"> <div class="row"> <div class="pricing-column col-lg-4 col-md-6"> <div class="card"> <div class="card-header"> <h3>Individual Walks</h3> </div> <div class="card-body"> <p>30 Minute walk - £11</p> <p>45 Minute walk - £13</p> <p>Each additional dog - £2</p> <a type="button" href="#contact" class="btn btn-lg btn-outline-primary btn-block">Contact Me</a> </div> </div> </div> <div class="pricing-column col-lg-4 col-md-6"> <div class="card"> <div class="card-header"> <h3>Group Walks</h3> </div> <div class="card-body"> <p>30 Minute walk - £8</p> <p>45 Minute walk - £10</p> <p>Each additional dog - £2</p> <a type="button" href="#contact" class="btn btn-lg btn-outline-primary btn-block">Contact Me</a> </div> </div> </div> <div class="pricing-column col-lg-4"> <div class="card"> <div class="card-header"> <h3>Let Out</h3> </div> <div class="let-out card-body"> <p>Let out in the garden</p> <p>15 Minutes - £7</p> <a type="button" href="#contact" class="let-out-btn btn btn-lg btn-outline-primary btn-block">Contact Me</a> </div> </div> </div> </div> </section> <!-- Testimonial Carousel --> <section id="testimonials"> <div class="testimonial-container container-fluid"> <h2 class="white-headings">Testimonials</h2> <div id="testimonial-carousel" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <p class="testimonial-text">"Chris came highly recommended to me by my previous when she retired, he has definitely lived up to his reputation? He is enthusiastic, trustworthy, reasonable, accommodating and a delight to know. He has been such a good influence in my pooches life (known to Chris as 'the crazy one') Winnie has loved everything about being walked by Chris and his other four legged friends. I can't recommend Chris enough if you need a dog walker, he is without doubt simply amazing! Don't ever give up Chris as too many people/pooches would be lost without you. Thank you so so much for your outstanding care for Winnie, it is very much appreciated!!"</p> <p class="tesimonial-name"><em>-Ruth Sadler</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been looking after our family pet since April 2014. He is trustworthy, hard worker, flexible, punctual, friendly and his prices are extremely competitive. From September, I shall increase his hours without a doubt. I would have absolutely no hesitation in recommending Chris. As highlighted on his business card, he is entirely 'dedicated to value and reward his customers'."</p> <p><em>-Aurelie</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Would just like to say how impressed we all are with Chris . Has walked our dog Billy for the last 15 days whilst he was staying at my parents in Osgodby while we were away on holiday . By all accounts Billy loved him and his walks .would recommend his services to anybody , he does exactly what he says he will and we are sure Billy will miss him now he is back home . Cannot thank him enough , and hopefully we will be using his service in the future."</p> <p><em>-Wendy & Phil Hammond</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"I can't recommend Chris highly enough! He's been walking my two dogs for the last year and they absolutely adore him. He can't do enough to help you and is incredibly flexible. I couldn't manage without him." </p> <p><em>-Libby Reynolds</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been looking after Freddie & Poppy since last autumn. he is reliable, flexible, honest and the dogs adore him. I would recommend him to anybody. He really has gone the extra mile on occasions. I am moving away from the area and he will be such a hard act to follow. Thanks for all your work Chris - we will all miss you!"</p> <p><em>-Val Cochrane</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been walking my dog Padmai for several months now and I have found him to be reliable and flexible. I am not sure who enjoys the walks most Padmai or Chris! and it gives me peace of mind knowing my dog has company and good a walk when I am at work. Thanks Chris and keep up the excellent job you are doing."</p> <p><em>-Susan McStay</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"After only a month of Chris walking my dogs, I can't believe I managed without him! So professional & reliable - thank you Chris! The furboys are looking forward to all their walks in 2016."</p> <p><em>-Lisa Jamieson</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris has been walking Charlie for nearly a year and the pair of them have become firm friends. Chris has a very special way with dogs and really gets to know their characters and little ways. Charlie always comes home well exercised, happy and clean - even on the muddiest of days."</p> <p><em>-Griselda Boyden</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"We use Chris to walk out dog Flea, he is reliable and flexible. Flea seems happier and more content when we get home from work and we no longer have to worry about him when we are at work, I would highly recommend Chris"</p> <p><em>-Ayesha Davies</em></p> </p> </div> <div class="carousel-item"> <p class="testimonial-text">"Chris is not just a dog walker he puts 100% into his relationship with my dog bella who loves him to bits. I would recommend Chris to anyone looking for someone to walk their dog, thank you Chris"</p> <p><em>-Judy & Bella</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"We moved to the area with our 1 year old German Shepherd pup. Chris has been fantastic and helped Talisker settle in the new environment. Chris shows great flexibility and knows how to handle our very boisterous boy."</p> <p><em>-Kasia B</em></p> </div> <div class="carousel-item"> <p class="testimonial-text">"So pleased we found Chris to walk our Labrador, Maddie, while I was recovering from an operation. He is fantastic with dogs, and loves their company as much as they do his. He is very reliable and really does 'go the extra mile'! Maddie has had a fabulous time and met lots of new doggy friends. She absolutely adores Chris and he's going to be a hard act for me to follow! Thank you so much Chris and we wish you continued success with your business. I'm certain we'll be back whenever we need your help in the future."</p> <p><em>-Carol & Bernard Warr - and Maddie & Charlie, of course.</em></p> </div> </div> <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </section> <section id="About"> <h2 class="about-heading">About Me</h2> <div class="container-fluid"> <div class="row"> <div class="about-box col-lg-6"> <img class="about-img" src="images\\chris.jpg" alt="Owner"> <p class="about-text">My name is Chris and I adore dogs. Having owned dogs throughout my life they bring me so much joy and I can honestly say that this is my dream job, not only do I get to work with dogs everyday but I also get to watch them enjoy there walks they love so much.</p> </div> <div class="about-box col-lg-6"> <img class="about-img" src="images\\poppy&freddy.jpg" alt="dog-img"> <p class="about-text">I've always wanted to work with animals especially dogs and throughout my life my main attributes have been that I'm a trustworthy, hardworking, reliable, and friendly individual. I soon began to realize that all of these attributes fitted perfectly into the dog walking profession.</p> </div> <div class="about-box"> <img class="about-img" src="images\\charlie.jpg" alt="dog-img"> <p class="about-text">From years of experience with dogs I understand how important it is for them to be exercised on a regular basis, I know this isn't always easy with work and life commitments and it can be hard to find the right person to care for your dogs. That is when I decided to put both of my passions together, looking after mans best friend and helping others. This way not only do I get the opportunity to work with dogs everyday but also help give those in need a professional reliable service with someone they can trust. </p> </div> <div class="about-box col-lg-4"> <img class="about-img" src="images\\Chris&billy.jpg" alt="chris&billy"> </div> <div class="about-box col-lg-4"> <img class="about-img" src="images\\gerrard.jpg" alt="dog-img"> </div> <div class="about-box col-lg-4"> <img class="about-img" src="images\\teddy2.jpg" alt="dog-img"> </div> <div class="about-box"> <p class="about-text">I made my company Paws for Walk in 2014 and haven't looked back since. I am continually focusing on providing the highest levels of customer satisfaction and will do everything I can to meet your expectations, We go the extra mile! At Paws for Walk its vital to go that extra mile for all of my clients and I do so by doing my upmost to meet your every need. I also offer my customers rewards by giving out special offers to my long term members. </p> </div> </div> </div> </section> <section id=contact> <div class="container"> <div class="row"> <div class="form-box col-lg-6"> <h2 class="contact-headings">Contact Me</h2> <form action="mailto:chris@pawsforwalk.co.uk"> <div class="form-group"> <label for="email-address"></label> <input type="email" class="form-control" id="email-address" placeholder="name@example.com"> <label for="subject"></label> <input type="text" class="form-control" id="subject" placeholder="Subject"> <div class="form-group"> <label for="message"></label> <textarea class="form-control" id="message" rows="8" placeholder="Your-Message"></textarea> </div> </div> </form> <button type="submit" class="contact-btn btn">Submit</button> </div> <div class="form-box col-lg-6"> <h2 class="contact-headings">Submit A testimonial</h2> <form action="mailto:chris@pawsforwalk.co.uk"> <div class="form-group"> <label for="subject"></label> <input type="text" class="form-control" id="subject" placeholder="Name"> <div class="form-group-test"> <label for="message"></label> <textarea class="form-control" id="message" rows="10" placeholder="Your-Testimonial"></textarea> </div> </div> </form> <button type="submit" value="send" class="contact-btn btn">Submit</button> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="icons col-lg-3"> <i class="fas fa-paw fa-2x"></i> <p>Paws for Walk</p> </div> <div class="icons col-lg-3"> <i class="fas fa-phone fa-2x"></i> <p>07714847184</p> </div> <div class="icons col-lg-3"> <i class="fas fa-envelope fa-2x"></i> <p>chris@pawsforwalk.co.uk</p> </div> <div class="icons col-lg-3"> <i class="fas fa-map-marker-alt fa-2x"></i> <p>Market Rasen</p> </div> </div> </div> </section> </body> <footer id=footer> <i class="footer-icons fas fa-envelope fa-2x"></i> <i class="footer-icons fab fa-facebook-square fa-2x"></i> <p class="footer-text">Paws for Walk - Established 2004</p> </footer> </html>

(The hamburger icon in your codepen example doesn't work so I'm not sure where the FB icon is supposed to go on smaller screens - however there should be enough in the explanation and example above to help you tweak it if you need to!)

Answer 2

try this it:

@media (min-width: 992px){

.navbar-expand-lg .navbar-collapse {
    flex-direction: column;
    align-items: flex-end;
  }

}

Answer 3

Add a id to facebook link ( tag)

#fb{
  position: absolute;
  top: .5rem; //because you given .navbar padding: .5rem 1rem; take top padding
  right: 1rem; //because you given .navbar padding: .5rem 1rem; take right padding
}

Codepen demo : https://codepen.io/Rayeesac/pen/YzqVepa