CODEWITHSUNDEEP
csscenternavbar
Danny Pearson
Danny Pearson

Reputation: 68

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;
}

Upvotes: 0

Views: 744

Answers (2)

Danny Pearson
Danny Pearson

Reputation: 68

Thankyou :) was literally about to comment saying i'd sorted it with this

    @media (max-width: 768px) {
    .navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-toggle {
    z-index: 3;
}
}

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 282000

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

Upvotes: 1

Related Questions