Modify navbar on small devices

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;">
            <a href="/">My 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 href="/One">Item 1</a></li>
                <li><a href="/Two">Item 2</a></li>
                <li><a href="/Three">Item 3</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

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

Answer 2

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){}