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

jsfiddle


Comments

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

matplotlib support failed in PyCharm on OSX -

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -