Modify navbar on small devices - html

Question

I'm working on my first bootstrap project and is currently setting up the navbar.
What I want: When the XS model is activated (or whats is called), I want to change the font-size of the header, change the height of the navbar and make the header align to left.
And everything must of-course scale correctly.
Is there any clever way of doing this??
<nav class="navbar navbar-default navbar-fixed-top">
<div style="text-align:center;">
<header style="font-size:48px;color:black;">
My Header
</header>
</div>
<div class="container" style="padding:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-transform:uppercase;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</nav>

Answer 1

You would need to use media queries, the Bootstrap switch points are below.The smallest 576 would be your starting point, you can reference media queries here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Bootstrap:
#media(min-width:576px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}

Answer 2

Ok, I think I've figured it out.
HTML:
<nav class="navbar navbar-xs navbar-default navbar-fixed-top" style="padding:0px;margin:0px;">
<div class="hidden-xs" style="text-align:center;">
<header style="font-size:48px;">
<a href="/" style="color:black;">
Header
</a>
</header>
</div>
<div class="visible-xs pull-left" style="margin:8px;">
<header style="font-size:28px;">
<a href="/" style="color:black;">
Header
</a>
</header>
</div>
<div class="container" style="padding:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-transform:uppercase;">
<li><a asp-controller="Projects">Projects</a></li>
<li><a asp-controller="Visuals">Visuals</a></li>
<li><a asp-controller="Now">Now</a></li>
<li><a asp-controller="About">About</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar {
min-height: 60px;
}
.navbar-brand {
padding: 0 15px;
height: 60px;
line-height: 60px;
}
.navbar-brand, .navbar-nav li a {
line-height: 60px;
height: 60px;
padding-top: 0;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-collapse {
max-height:60px;
}
.navbar-toggle {
margin-right:28px;;
}