1
\$\begingroup\$

I've created 3 formats for navigation menus:

  1. Singe Line
  2. Multi line
  3. Multiline with big branding

My intent is to use these as a template in various applications depending on the need.

I've tested these on recent versions of Chrome, IE, Edge, Opera, and Safari all on Windows. So far, at least on the desktop, with the exception of Safari which doesn't display the menu items when collapsed - although even the bootstrap site nav examples don't appear correctly in Safari on Windows.

I'm hoping for a code review on the use of the bootstrap classes, and best practices. I've included the nav menu HTML below, and some minor extra css that I used, beyond the bootstrap styles

<!-- Single line navigation menu -->
<header>
    <div id="app-header" class="p-0 m-0 mb-2">

        <nav class="app-header-row navbar navbar-expand-md navbar-light bg-light mb-2">

            <!-- Brand -->
            <a id="appLink" class="navbar-brand" href="../../../Default.aspx"><img id="appLogo" src="../../../App_Themes/Default/img/app/applogo.svg" />My Responsive Apps</a>
            <!-- End Brand -->

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Row -->
            <div class="collapse navbar-collapse notextwrap-all" id="navbarCollapse">

                <!-- Left -->
                <ul class="navbar-nav noflexwrap">
                    <li class="active nav-item">
                        <a href="../../../MasterUserControls/#" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="../../../MasterUserControls/#" class="nav-link">Link</a>
                    </li>
                    <li class="nav-item">
                        <a href="../../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
                    </li>
                    <li class="dropdown nav-item">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown01">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>

                <!-- Middle -->
                <div class="d-md-inline-flex m-auto">

                    <ul class="navbar-nav nav noflexwrap">
                        <li class="active nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-cart">Cart<span class="badge badge-balloon badge-info">3</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-report">Reports</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-alert">Alerts<span class="badge badge-balloon badge-warning">1</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-notify">Notifications<span class="badge badge-balloon badge-danger">2</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-add">Create</a>
                        </li>
                    </ul>
                </div>

                <!-- Right -->
                <div class="ml-auto d-md-inline-flex">

                    <ul class="navbar-nav nav noflexwrap">
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-help">Help</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-exit">Sign-out</a>
                        </li>
                        <li class="mr-2 nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-admin">Administration</a>
                        </li>
                        <li class="d-none d-md-flex nav-item">
                            <span class="navbar-text icon-mmnu-user">
                                IHA\chaj17
                            </span>
                        </li>
                    </ul>

                    <span class="ml-md-3">

                        <ul class="navbar-nav nav ml-auto noflexwrap">
                            <li class="nav-item">
                                <div id="appSearch" class="input-group noflexwrap">
                                    <input type="text" class="nav-input form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" />
                                    <button class="btn btn-success input-group-append" type="button"><i class="icon-mmnu-search small"></i></button>
                                </div>
                            </li>
                        </ul>

                    </span>
                </div>
            </div>
        </nav>
    </div>
</header>

<!-- Multiline header-->
<header>
    <div id="app-header" class="p-0 m-0 mb-2 border-bottom border-brand-light">

        <!-- Row 1 -->
        <nav class="app-header-row navbar navbar-expand-md navbar-light bg-bodybgcolor pt-md-0 pt-sm-2 pb-0">

            <!-- Brand -->
            <a id="appLink" class="navbar-brand" href="../../../Default.aspx"><img id="appLogo" src="../../../App_Themes/Default/img/app/applogo.svg" />My Responsive Apps</a>
            <!-- End Brand -->

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse notextwrap-all" id="navbarCollapse">
                <!-- Right -->
                <div class="ml-auto small">

                    <ul class="navbar-nav nav noflexwrap">
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-help">Help</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-exit">Sign-out</a>
                        </li>
                        <li class="mr-2 nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-admin">Administration</a>
                        </li>
                        <li class="d-none d-md-flex nav-item">
                            <span class="navbar-text icon-mmnu-user">
                                IHA\chaj17
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Row 2 -->
        <nav class="app-header-row navbar navbar-expand-md navbar-light bg-bodybgcolor pt-0 pb-sm-2">

            <div class="collapse navbar-collapse  notextwrap-all" id="navbarCollapseBottom">

                <!-- Left -->
                <ul class="navbar-nav noflexwrap">
                    <li class="active nav-item">
                        <a href="../../../MasterUserControls/#" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="../../../MasterUserControls/#" class="nav-link">Link</a>
                    </li>
                    <li class="nav-item">
                        <a href="../../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
                    </li>
                    <li class="dropdown nav-item">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown01">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>

                <!-- Right -->
                <div class="ml-auto d-md-inline-flex">

                    <ul class="navbar-nav nav noflexwrap">
                        <li class="active nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-cart">Cart<span class="badge badge-balloon badge-info">3</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-report">Reports</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-alert">Alerts<span class="badge badge-balloon badge-warning">1</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-notify">Notifications<span class="badge badge-balloon badge-danger">2</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-add">Create</a>
                        </li>
                    </ul>

                    <span class="ml-md-3">

                        <ul class="navbar-nav nav ml-auto noflexwrap">
                            <li class="nav-item">
                                <div id="appSearch" class="input-group noflexwrap">
                                    <input type="text" class="nav-input form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" />
                                    <button class="btn btn-success input-group-append" type="button"><i class="icon-mmnu-search small"></i></button>
                                </div>
                            </li>
                        </ul>

                    </span>
                </div>
            </div>
        </nav>
    </div>
</header>

<!-- Big Brand Multiline header-->
<header>
    <div id="app-header" class="p-0 m-0 mb-2">

        <nav class="app-header-row navbar navbar-expand-md navbar-dark bg-dark pt-0 pb-0">

            <!-- Big Brand -->
            <div class="flex-column pb-1">
                <div class="flex-row pb-0">
                    <a id="appLink" class="navbar-brand navbar-bigbrand align-bottom p-0" href="../../../Default.aspx"><img id="appLogo" src="../../../App_Themes/Default/img/app/applogo.svg" />My Responsive Apps</a>
                </div>
                <div class="flex-row" style="line-height: 1rem">
                    <span class="navbar-text small p-0">Web App Starter Kit</span>
                </div>
            </div>
            <!-- End Big Brand -->

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="container flex-md-column w-100 align-items-stretch ml-0 mr-0 pl-0 pr-0" style="max-width: none;">

                <!-- Row 1 -->
                <div class="collapse navbar-collapse flex-row notextwrap-all" id="navbarCollapse">

                    <!-- Right -->
                    <div class="ml-auto small">

                        <ul class="navbar-nav nav noflexwrap">
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-help">Help</a>
                            </li>
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-exit">Sign-out</a>
                            </li>
                            <li class="mr-2 nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-admin">Administration</a>
                            </li>
                            <li class="d-none d-md-flex nav-item">
                                <span class="navbar-text icon-mmnu-user">
                                    IHA\chaj17
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Row 2 -->
                <div class="collapse navbar-collapse flex-row notextwrap-all pt-0 pb-2" id="navbarCollapseBottom">

                    <!-- Left -->
                    <ul class="navbar-nav noflexwrap">
                        <li class="active nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link">Link</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
                        </li>
                        <li class="dropdown nav-item">
                            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu" aria-labelledby="dropdown01">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>

                    <!-- Right -->
                    <div class="ml-auto d-md-inline-flex">

                        <ul class="navbar-nav nav noflexwrap">
                            <li class="active nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-home">Home</a>
                            </li>
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-cart">Cart<span class="badge badge-balloon badge-info">3</span></a>
                            </li>
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-report">Reports</a>
                            </li>
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-alert">Alerts<span class="badge badge-balloon badge-warning">1</span></a>
                            </li>
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-notify">Notifications<span class="badge badge-balloon badge-danger">2</span></a>
                            </li>
                            <li class="nav-item">
                                <a href="../../../MasterUserControls/#" class="nav-link icon-mmnu-add">Create</a>
                            </li>
                        </ul>

                        <span class="ml-md-3">

                            <ul class="navbar-nav nav ml-auto noflexwrap">
                                <li class="nav-item">
                                    <div id="appSearch" class="input-group noflexwrap">
                                        <input type="text" class="nav-input form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" />
                                        <button class="btn btn-success input-group-append" type="button"><i class="icon-mmnu-search small"></i></button>
                                    </div>
                                </li>
                            </ul>

                        </span>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>

html.fixed-header #app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

#appSearch {
  max-width: 200px;
}

#appSearch input {
  background-color: #e1e1e1;
  border: none;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#appSearch button {
  padding: 1px;
  padding-left: 5px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-top: .1rem;
  padding-bottom: 0px;
}

#appLogo {
  width: 32px;
  height: 32px;
}

.navbar-bigbrand #appLogo {
  width: 32px;
  height: 32px;
}

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.