css - Bootstrap - Responsive Navbar-Brand -
is there way have brand text on left when on large screen, centre when on small screen? i'm using atm centre uses width whole bar 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; }
check css , make use of media queries have different css applied @ 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%; } }
Comments
Post a Comment