Top title not correctly centered because width of 'navbar fixed nav' is too large

Hi,

With a viewport width greater than 992 pixels, my left pane is fixed and always visible. In this case, the title on my fixed top navbar is not correctly centered (see html code below)

This is due to the fact that the width of ‘navbar-fixed .nav’ is 240 px too large : fixed positionning causing width to be 100% of the viewport instead of 100% of the ‘parent’ (header)

I fixed this by adding this in the css:

.navbar-fixed nav { 
    position: fixed; 
    /* width is 100% minus the fixed left navbar (240px) */
    width: -moz-calc(100% - 240px); /* Firefox */
    width: -webkit-calc(100% - 240px); /* Chrome, Safari */
    width: calc(100% - 240px); /* IE9+ and future browsers */
} 

@media only screen and (max-width : 992px) {
/* width is 100% because the fixed left navbar is not displayed */
    .navbar-fixed nav { width: 100% }
}

my html page (with materialize.css 0.96.0) looks like

[...]
        <header>
            <div class="navbar-fixed">
                <nav>
                    <div class="nav-wrapper">
                        <a id="top_title" href="#!" class="brand-logo center">My Title</a>
                        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
                    </div>
                </nav>
            </div>

            <ul id="nav-mobile" class="side-nav fixed">
                <li class="logo" style="height:120px; padding: 25px 15px">
                    <a id="logo-container" href="#">
                        <object id="front-page-logo" type="image/svg+xml" data="logo.svg">Your browser does not support SVG</object></a></li>
            </ul>
        </header>
       <main>
[...]

[transpirman]

Sorry for lacking additional info: actually, I used a fixed side nav as described at the bottom of the page http://materializecss.com/side-nav.html

=> when you add left padding of 240 px to the header, the fixed div at the top (nav bar) keeps the same width which makes it goes beyond the right border of the screen. So you need also to add the css code I described before.

Best Regards, and really great work of your team !!

PS: I am not too familiar with creation of codepen… I will try to illustrate that.

[DanielRuf]

You are doing it wrong 😉

http://codepen.io/anon/pen/PpvQRE

reference: http://stackoverflow.com/questions/18442628/position-fixed-width-100