Search code examples
htmlcssreactjsnavbarreact-bootstrap

How to I make the social media icons move from the center to the right while having the logo and pages stay in the center?

I am making a navbar that has my logo and pages in the center and social media icons on the right, but anything change I've done to the social media nav component never moved them to the right, it stayed in the center: enter image description here

Here is the code for this ( I am using react js, and the react-bootstrap module)

 <Navbar expand="lg" className="py-3">
        <Container>
          <Navbar.Brand href="/src/">
            <img
              src="/assets/Logo.png"
              width="60"
              height="60"
              className="d-inline-block align-top"
              alt="Nexus Devops"
            />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto text-center">
              <Nav.Link id='nav' href="/roadmap/">Updates</Nav.Link>
              <Nav.Link id='nav' href="/careers/">Careers</Nav.Link>
            </Nav>
            <Nav className=" ms-auto social-media-icons navbar-right">
              <Nav.Link href="#"><i className="fab fa-linkedin-in"></i></Nav.Link>
              <Nav.Link href="#"><i className="fab fa-reddit-alien"></i></Nav.Link>
              <Nav.Link href="#"><i className="fa-brands fa-twitter"></i></Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

I have tried by changing the className to 'justify-content-end' but that didn't do anything I add a css:

.social-media-icons {
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

again nothing, it never moved!

This is what I am trying to get ( I made a mockup on PS): enter image description here

Solution 

  • #container{
display:flex;
text-align:center;
margin-top:75px;}

.side{
   width:40%;
   border:solid blue 1px;}
   
   
#center{
width:20%;}

#fff{
float:right;}
    <div id='container'>
   <div class='side'>left</div>
   <div id='center'>center</div>
   <div class='side'>right
       <div id='fff'>
        <span>1</span>
        <span>2</span>
        <span>3</span></div></div>
</div>