Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PersonalHomePage's avatar

Some HTML help with Nav bar and side bar

Hi,

I'm still trying to learn some of the basics here. I'm building a site and I want the user to get a sidebar to appear when they go to a certain page. I'm using the basic Laravel template after doing

php artisan ui bootstrap --auth

Here's the code inside the layout/app.blade.php file. I basically took the nav bar that's included with --auth command and put it into a separate view and added the header tag, but I'm not even sure what that is for anyway.

<body>
<header id="header" class="border-left">
    <div id="app">
        @include('layouts/nav')
        <main class="py-4">
            <div class="container">
                @yield('content')
            </div>
        </main>
    </div>
</header>
</body>

I'm copying templates from the interwebs and I don't really know what any of this stuff means because I've never really worked with HTML. I'm slowly picking it up as I go along. Lately I'm stuck. I can't seem to find an easy enough template that has both a static nav bar and a sidebar.

A perfect example of what I'm trying to setup is this discussion area. It's got the nav bar on top and and a nice little sidebar. I tried inspecting the code, but I can't seem to find the magic sauce that would let me incorporate the same thing into my site. Every time I try putting a sidebar in I either get it on top and pushing down the nav bar or I get under, but pushing the rest of my content over.

0 likes
4 replies
PersonalHomePage's avatar

for anyone that's curious what the end result is... this is my create.blade.php with the sidebar included.

@section('content')
    <div class="container" style="margin-top:30px">
        <div class="row">
            <div class="col-sm-2.5">
                <h1>Accounts</h1>
                <h3>Options:</h3>
                <p></p>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Add Account</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link danger" href="#">Delete Account</a>
                    </li>
                </ul>
                <hr class="d-sm-none">
            </div>
            <div class="col-sm-8">
                <form action="accounts" method="get" class="pb-15" autocomplete="off">
                    @include('accounts.search')
                    <button type="submit" class="btn btn-primary">Search</button>
                </form>
            </div>
        </div>
    </div>
@endsection

I ended up using the bootstrap tutorial inside of my accounts view. Now I have the sidebar appearing under the nav bar and I can include or yield for more content as the page develops.

Thanks for the help!

1 like
jlrdw's avatar

Good, I am glad that helped.

1 like

Please or to participate in this conversation.