Search code examples
csscenternavbar

Bootstrap - Responsive Navbar-Brand

Is there a way to have the brand text on the left when on a large screen, then centre when on a small screen? I'm using this atm to centre it but it uses the width so the whole bar is a link.

<a href="" target="blank" class="navbar-brand">Name of App</a>



.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index: 3;
}

Solution

  • Check this css and make use of media queries to have different css applied at different screen sizes

    @media(max-width: 767px) {
  .navbar-brand {
    position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    text-align: left;
    margin: auto;
  }

}

@media(min-width: 768px) {
  .navbar-brand {
    position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    color: orange;

  }
  .nav.navbar-nav {
    margin-left: 30%;
  }

}

    JSFIDDLE