Fixed and Extended Nav w/ Tabs + Fixed SideNav pushes the Header the to right

Description

When using fixed side nav, the other adjacent components needs to have 300 px padding per the documentation.. But this results in the header continuing over beyond the screen as follows (notice the missing right icon links)-

Repro Steps

Here’s the code. It takes care of the issue where we need to put the sidenav out of fixed nave to make it clickable -

Markup -

<header>
    <div class="navbar-fixed">
        <nav class="nav-extended">
            <div class="nav-wrapper">
                <a href="#" class="brand-logo">Logo</a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="sass.html"><i class="material-icons">search</i></a></li>
                    <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
                    <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
                    <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
                </ul>
                <ul class="tabs tabs-transparent">
                    <li class="tab"><a href="#test1">Test 1</a></li>
                    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
                    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
                    <li class="tab"><a href="#test4">Test 4</a></li>
                    <li class="tab"><a href="#test5">Test 5</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <ul class="side-nav fixed" id="mobile-demo">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
        <li class="no-padding">
            <ul class="collapsible collapsible-accordion">
                <li>
                    <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
                    <div class="collapsible-body">
                        <ul>
                            <li><a href="#!">First</a></li>
                            <li><a href="#!">Second</a></li>
                            <li><a href="#!">Third</a></li>
                            <li><a href="#!">Fourth</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</header>

Screenshots / Codepen

This is the assumed header that should display per the code from docs site -

[gimelg]

I’m having the same issue. Is there any solution to this?

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it’s still necessary.