0

I want to use the bootstrap navbar brand without having it pushing other elements around

This way it would have the icon on the left and the navbar elements centered perfectly

Alternatively maybe instead of having the element in the navabr brand, the element itself could be put as a normal link but forced on a side?

codepen:

https://codepen.io/bladeranner5005/pen/wvPoBPx

/*--Background--*/

body {
  background-color: black;
  font-family: 'Righteous', cursive;
}

p {
  font-size: 1.5vw;
}

@media (max-width:768px) {
  p {
    font-size: 2.5vw;
  }
}

h4 {
  font-size: 1.8vw;
}

@media (max-width:768px) {
  h4 {
    font-size: 2.8vw;
  }
}


/*
@media  {

    background-image: url("../img/background/sfondo-index-bn.png");
    background-size: cover;
    background-repeat: no-repeat;

    height: 100vh;

}

.background-image-index {
    background-color: black;
}

 */


/*--Font righteous--*/

.font-righteus {
  font-family: 'Righteous', cursive;
}


/*--Navbar--*/

.background-black {
  background-color: black;
}


/*--Colors nav--*/

.border-pill {
  border-radius: 500px;
  border-style: solid;
  border-width: thick;
}

@media (max-width:768px) {
  .border-pill {
    border-style: none;
  }
}

.storia-bd-colors {
  border-color: #fd0ade;
}

.storia-colors {
  color: #fd0ade;
}

.storia-bd-colors:hover {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.storia-bd-colors:hover>.storia-colors {
  color: black;
}

.storia-bd-colors-active {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.storia-colors-active {
  color: black;
}

@media (max-width:768px) {
  .storia-bd-colors-active {
    background-color: black;
  }
  .storia-colors {
    color: white;
  }
  .storia-colors-active {
    color: white;
  }
  .storia-bd-colors:hover {
    background: none;
  }
  .storia-bd-colors:hover>.storia-colors {
    color: white;
  }
}

.access-bd-colors {
  border-color: #0004FF;
}

.access-colors {
  color: white;
}

.access-bd-colors:hover {
  border-color: #0004FF;
  background-color: #0004FF;
}

.access-bd-colors:hover>.access-colors {
  color: black;
}

.access-bd-colors-active {
  border-color: #0004FF;
  background-color: #0004FF;
}

.access-colors-active {
  color: black;
}

@media (max-width:768px) {
  .access-bd-colors-active {
    background-color: black;
  }
  .access-colors {
    color: white;
  }
  .access-colors-active {
    color: #0004FF;
  }
  .access-bd-colors:hover {
    background: none;
  }
  .access-bd-colors:hover>.access-colors {
    color: #0004FF;
  }
}


/*

.info-bd-colors {
    border-color: #fd0ade;
}

.info-colors {
    color: #fd0ade;
}

.info-bd-colors:hover {
    border-color: #fd0ade;

    background-color: #fd0ade;
}

.info-bd-colors:hover > .info-colors {
    color: black;
}

.info-bd-colors-active {
    border-color: #fd0ade;

    background-color: #fd0ade;
}

.info-colors-active {
    color: black;
}

@media (max-width:768px) {
    .info-bd-colors-active {
        background-color: black;
    }

    .info-colors {
        color: white;
    }

    .info-colors-active {
        color: white;
    }

    .info-bd-colors:hover {
        background: none;
    }

    .info-bd-colors:hover > .info-colors {
        color: white;
    }
}

 */

.home-bd-colors {
  border-color: #fff90c;
}

.home-colors {
  color: #fff90c;
}

.home-bd-colors:hover {
  border-color: #fff90c;
  background-color: #fff90c;
}

.home-bd-colors:hover>.home-colors {
  color: black;
}

.home-bd-colors-active {
  border-color: #fff90c;
  background-color: #fff90c;
}

.home-colors-active {
  color: black;
}

@media (max-width:768px) {
  .home-bd-colors-active {
    background-color: black;
  }
  .home-colors {
    color: white;
  }
  .home-colors-active {
    color: white;
  }
  .home-bd-colors:hover {
    background: none;
  }
  .home-bd-colors:hover>.home-colors {
    color: white;
  }
}

.locali-bd-colors {
  border-color: #06fbbe;
}

.locali-colors {
  color: #06fbbe;
}

.locali-bd-colors:hover {
  border-color: #06fbbe;
  background-color: #06fbbe;
}

.locali-bd-colors:hover>.locali-colors {
  color: black;
}

.locali-bd-colors-active {
  border-color: #06fbbe;
  background-color: #06fbbe;
}

.locali-colors-active {
  color: black;
}

@media (max-width:768px) {
  .locali-bd-colors-active {
    background-color: black;
  }
  .locali-colors {
    color: white;
  }
  .locali-colors-active {
    color: white;
  }
  .locali-bd-colors:hover {
    background: none;
  }
  .locali-bd-colors:hover>.locali-colors {
    color: white;
  }
}

.eventi-bd-colors {
  border-color: white;
}

.eventi-colors {
  color: white;
}

.eventi-bd-colors:hover {
  border-color: white;
  background-color: white;
}

.eventi-bd-colors:hover>.eventi-colors {
  color: black;
}

.eventi-bd-colors-active {
  border-color: white;
  background-color: white;
}

.eventi-colors-active {
  color: black;
}

@media (max-width:768px) {
  .eventi-bd-colors-active {
    background-color: black;
  }
  .eventi-colors-active {
    color: white;
  }
  .eventi-bd-colors:hover {
    background: none;
  }
  .eventi-bd-colors:hover>.eventi-colors {
    color: white;
  }
}


/*--Colors MOBILE index-----------------------------------------------------------------------------------------------*/

.border-pill-mobile {
  border-radius: 500px;
  border-style: solid;
  border-width: thick;
}

.storia-bd-colors-mobile {
  border-color: #fd0ade;
}

.storia-colors-mobile {
  color: #fd0ade;
}

.storia-bd-colors-active-mobile {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.storia-colors-active-mobile {
  color: black;
}

.info-bd-colors-mobile {
  border-color: #fd0ade;
}

.info-colors-mobile {
  color: #fd0ade;
}

.info-bd-colors-active-mobile {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.info-colors-active-mobile {
  color: black;
}

.home-bd-colors-mobile {
  border-color: #fff90c;
}

.home-colors-mobile {
  color: #fff90c;
}

.home-bd-colors-active-mobile {
  border-color: #fff90c;
  background-color: #fff90c;
}

.home-colors-active-mobile {
  color: black;
}

.locali-bd-colors-mobile {
  border-color: #06fbbe;
}

.locali-colors-mobile {
  color: #06fbbe;
}

.locali-bd-colors-active-mobile {
  border-color: #06fbbe;
  background-color: #06fbbe;
}

.locali-colors-active-mobile {
  color: black;
}

.eventi-bd-colors-mobile {
  border-color: white;
}

.eventi-colors-mobile {
  color: white;
}

.eventi-bd-colors-active-mobile {
  border-color: white;
  background-color: white;
}

.eventi-colors-active-mobile {
  color: black;
}


/*--Text MOBILE index--*/

.text-index-mobile {
  width: 100%;
}


/*Font navbar*/


/*
.navbar-font {
    font-size: 30px;
}
 */


/*--Basic colors--*/

.border-yellow {
  border-color: #fff90c !important;
}

.background-yellow {
  background-color: #fff90c !important;
}

.color-yellow {
  color: #fff90c;
}

.color-white {
  color: white;
}

.color-black {
  color: black;
}
<head>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!--Righteurs-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>

<body>
  <!--NAVBAR-->
  <nav class="navbar navbar-expand-lg navbar-dark background-black">
    <div class="container-fluid">

      <a class="navbar-brand active  d-inline-block" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-person-circle pb-1" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
            </svg>
        <span class="mb-0 font-righteus">Accedi</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse justify-content-center font-righteus" id="navbarNavAltMarkup">
        <div class="navbar-nav">

          <a class="nav-link p-md-3 m-md-3 border-pill home-bd-colors-active h4" aria-current="page" href="#"><span class="home-colors-active">Home</span></a>
          <a class="nav-link p-md-3 m-md-3 border-pill storia-bd-colors h4" href="pages/storia.html"><span class="storia-colors">Storia</span></a>
          <!--    <a class="nav-link p-md-3 m-md-3 border-pill info-bd-colors h4" href="#"><span class="info-colors">Info</span></a> -->
          <a class="nav-link p-md-3 m-md-3 border-pill locali-bd-colors h4" href="pages/locali.html"><span class="locali-colors">Locali</span></a>
          <a class="nav-link p-md-3 m-md-3 border-pill eventi-bd-colors h4" href="pages/eventi.html"><span class="eventi-colors">Eventi</span></a>

        </div>
      </div>

    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Andrea D'Angelo
  • 31
  • 2

1 Answers1

1

Change the following...

<a class="navbar-brand active  d-inline-block" href="#">

To this...

<a class="navbar-brand active position-absolute" href="#">

This will remove the brand from the normal flow so it won't interfere with other elements. Be careful with this however as if you use this there is a potential for the brand to overlap other elements - just play it by ear.

https://getbootstrap.com/docs/5.1/utilities/position/

Simon K
  • 1,503
  • 1
  • 8
  • 10