Bootstrap Navigation Flex-Column с накоплением ml-auto и mr-auto - PullRequest
Новая
       8

Bootstrap Navigation Flex-Column с накоплением ml-auto и mr-auto

1 голос
/ 31 мая 2019

У меня есть навигационный макет, который использует Bootstrap 4. Я приложил все усилия, чтобы он выглядел профессионально, но я изо всех сил стараюсь, чтобы он выглядел так, как я хочу, как на настольном, так и на мобильном макете (на мобильном устройстве, в основном, делаюткнопка переключения отображается справа).

Я довольно хорошо разбираюсь в подобных вещах, но я занят работой с бэкэндом, и мне кажется, что flexbox работает не так, как я ожидаю.

На рабочем столе я пытаюсь взять ссылку account в навигационной панели и выровнять ее по правому краю с верхней строкой навигации, на мобильном устройстве я бы хотел, чтобы ссылка account была размещена в нижней части свернутой навигации. 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- bootstrap, js, and jquery -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<!-- font awesome-->
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/fontawesome-pro/css/all.css" rel="stylesheet" type="text/css"/>

<!-- custom files -->
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/main_style.css" rel="stylesheet" type="text/css"/>
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/form_style.css" rel="stylesheet" type="text/css"/>
<link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/animation_css.css" rel="stylesheet" type="text/css"/>
<script src="https://exactestate.sfo2.digitaloceanspaces.com/static/js/local_timezone_cookie.js"></script>
</head>

<body>
<div class="main">

  <style>
    #logo {
        vertical-align: middle;
        width: 50px;
    }

    .navbar-brand span {
        color: white;
        font-size: 2rem;
        line-height: 1.2;
        font-weight: 200;
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 15px;
    }

    .navbar-brand b {
        display: block;
        font-size: 50%;
        line-height: 1;
    }
</style>
    

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-toggler-right">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
            aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar">

    <!-------------------------------------------------------------------------------------------------------no flex -->
    <ul class="navbar-nav mr-auto no_flex">
        <a class="navbar-brand" href="#"><img id="logo" alt="Logo" src="https://exactestate.sfo2.digitaloceanspaces.com/static/images/logo_white.png">
            <span>ExactEstate<b>Management Software</b></span>
        </a>
    </ul>
    <ul class="navbar-nav mr-auto">
        <!-------------------------------------------------------------------------------------------------------Users-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                <i class="fas fa-users" style="color:white;"></i> Users
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'users_create' CLIENT.id %}"><i
                        class="far fa-user-plus"></i> Register User</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'users_index' CLIENT.id %}"><i
                        class="fas fa-users"></i> Users</a>
            </div>
        </li>
        <!-------------------------------------------------------------------------------------------------------Applications-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                <i class="fa fa-book" style="color:white;"></i> Applications
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{% url 'applications_create' CLIENT.id %}">
                    <i class="fas fa-file-plus"></i> New Application</a>

                <a class="dropdown-item" href="{% url 'applications_index' CLIENT.id %}">
                    <i class="fas fa-cabinet-filing"></i> Existing Applications</a>

                <div class="dropdown-divider"></div>

                <a class="dropdown-item"
                   href="{% url 'applications_processing_management' CLIENT.id %}">
                    <i class="far fa-ballot-check"></i> Management Processing</a>
                <a class="dropdown-item"
                   href="{% url 'applications_processing_compliance' CLIENT.id %}">
                    <i class="fas fa-ballot-check"></i> Compliance Processing</a>

                <div class="dropdown-divider"></div>

                <a class="dropdown-item"
                   href="{% url 'applications_preleasing' CLIENT.id %}">
                    <i class="fa fa-book"></i> Application Dashboard and Preleasing</a>
            </div>
        </li>
        <!-------------------------------------------------------------------------------------------------------Properties-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button">
                <i class="far fa-building" style="color:white;"></i> Properties
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'properties_index' CLIENT.id %}">
                    <i class="far fa-building"></i> Properties</a>
                <a class="dropdown-item" href="{% url 'properties_units_search' CLIENT.id %}">
                    <i class="fas fa-bed"></i> Units</a>
                <a class="dropdown-item" href="{% url 'properties_water_billing_index' CLIENT.id %}">
                    <i class="far fa-tint"></i> Water Billing</a>

                <a class="dropdown-item" href="{% url 'merchant_accounts_index' CLIENT.id %}">
                    <i class="far fa-usd-square"></i> Merchants</a>
            </div>
        </li>
        <!-------------------------------------------------------------------------------------------------------Prospects-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                <i class="far fa-layer-plus" style="color:white;"></i> Prospects
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'guest_cards_index' CLIENT.id %}">
                    <i class="fal fa-id-card-alt"></i> Guest Cards
                </a>
                <a class="dropdown-item" href="{% url 'appointments_index' CLIENT.id %}">
                    <i class="fal fa-phone"></i> Appointments
                </a>

            </div>
        </li>
        <!-------------------------------------------------------------------------------------------------------Residents-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                <i class="far fa-people-carry" style="color:white;"></i> Residents
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'residents_ledgers_index' CLIENT.id %}">
                    <i class="far fa-file-invoice-dollar"></i> Ledgers</a>
                <a class="dropdown-item" href="{% url 'residents_late_fees' CLIENT.id %}">
                    <i class="far fa-file-invoice-dollar"></i> Late Fee Declaration</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'residents_index' CLIENT.id %}">
                    <i class="fas fa-search"></i> Resident Search</a>
                <a class="dropdown-item" href="{% url 'residents_extras_index' CLIENT.id %}">
                    <i class="fas fa-plus-square"></i> Resident Extras</a>
                <a class="dropdown-item" href="{% url 'residents_create' CLIENT.id %}">
                    <i class="fal fa-person-booth"></i> Enter Residents</a>

                <div class="dropdown-divider"></div>

                <a class="dropdown-item" href="{% url 'residents_renewals' CLIENT.id %}">
                    <i class="fal fa-calendar-plus"></i> Renewals</a>
                {#                    <a class="dropdown-item" href="\{{ CLIENT.id }}\residents\renewal_settings\">#}
                {#                        <i class="fal fa-cog"></i> Renewal Settings</a>#}
            </div>
        </li>
       <!-------------------------------------------------------------------------------------------------------Tasks-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                <i class="fas fa-tasks" style="{% if OPEN_TASKS %}color:red;{% else %}color:white;{% endif %}"></i>&nbsp;Tasks
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'tasks_create' CLIENT.id %}">
                    <i class="far fa-plus"></i> Create </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'tasks_list' CLIENT.id %}">
                    <i class="fal fa-eye" style="{% if OPEN_USER_TASKS %}color:red;{% endif %}"></i> View Completable Tasks
                </a>
                <a class="dropdown-item" href="{% url 'tasks_status' CLIENT.id %}">
                    <i class="fal fa-eye" style="{% if OPEN_SYSTEM_TASKS %}color:red;{% endif %}"></i> View Created Tasks
                </a>
            </div>
        </li>
       <!----------------------------------------------------------------------------------------------------Reports-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                <i class="fas fa-file-chart-line" style="color:white;"></i>&nbsp;Reports
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'reports_index' CLIENT.id %}">
                    <i class="far fa-file-chart-line"></i> Reports
                </a>
            </div>
        </li>

    </ul>

    <ul class="navbar-nav mr-auto">
        <!------------------------------------------------------------------------------------------------------Documents-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                <i class="fas fa-folder-open" style="color:white;"></i> Documents
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{% url 'documents_upload' CLIENT.id %}">
                    <i class="far fa-file-upload"> </i> Upload Documents </a>
                <a class="dropdown-item" href="{% url 'documents_index' CLIENT.id %}">
                    <i class="far fa-file-download"></i> Download Documents </a>
                <a class="dropdown-item" href="{% url 'documents_builder_index' CLIENT.id %}">
                    <i class="far fa-hard-hat"></i> Document Builder </a>
            </div>
        </li>
        <!------------------------------------------------------------------------------------------------------Forms-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                <i class="fab fa-wpforms" style="color:white;"></i> Forms
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{% url 'forms_index' CLIENT.id %}">
                    <i class="fab fa-wpforms"></i> View Forms</a>
                <a class="dropdown-item" href="{% url 'forms_declarations_index' CLIENT.id %}">
                    <i class="fab fa-wpforms"></i> Create Form Declarations</a>
            </div>
        </li>
       <!-------------------------------------------------------------------------------------------------------Work Orders-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                <i class="far fa-user-hard-hat" style="color:white;"></i> Work Orders
            </a>
            <div class="dropdown-menu" aria-labelledby="navDropdown">
                <a class="dropdown-item" href="{% url 'work_orders_declarations' CLIENT.id %}">
                    <i class="fal fa-flag-checkered"></i> Work Order Declaration </a>
                <a class="dropdown-item" href="{% url 'work_orders_index' CLIENT.id %}">
                    <i class="fal fa-eye"></i> View Work Orders
                </a>
                <a class="dropdown-item" href="{% url 'work_orders_submit' CLIENT.id %}">
                    <i class="fas fa-clipboard-list"></i> Submit Work Order
                </a>
            </div>
        </li>
        <!-------------------------------------------------------------------------------------------------------Visitors-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
               id="navbarDropdown" role="button"
               data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false">
                <i class="fa fa-user-plus" style="color:white;"></i> Visitors
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{% url 'visitors_enter' CLIENT.id %}"><i class="fas fa-user-plus"></i> Enter
                    Visitor</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'visitors_index' CLIENT.id %}"><i class="fas fa-users"></i> Visitors</a>
            </div>
        </li>

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
               id="navDropdown" role="button"
               data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false">
                <i class="fas fa-user" style="color: white"></i> Account
            </a>
            <div class="dropdown-menu dropdown-menu-left" aria-labelledby="navDropdown">
                <h4 style="text-align:center;">Account </h4>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="{% url 'update_account' CLIENT.id %}">
                    <i class="far fa-edit"></i> Edit Account Information</a>
                <a class="dropdown-item" href="{% url 'login_logout' CLIENT.id %}">
                    <i class="far fa-sign-out-alt"></i> Logout</a>
            </div>
        </li>
    </ul>
</div>
</nav>

1 Ответ

1 голос
/ 31 мая 2019

РЕДАКТИРОВАТЬ: после того, как OP прояснил его ожидания, я обновил код и добавил медиазапросы для различного расположения элементов между экранами мобильных устройств и настольных компьютеров, и я все еще оставил div Обертка для всего меню и сделал его float-left.

Демо ниже: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap, js, and jquery -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


<!-- js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>


    <!-- font awesome-->
    <link href="https://exactestate.sfo2.digitaloceanspaces.com/static/fontawesome-pro/css/all.css" rel="stylesheet" type="text/css"/>

    <!-- custom files -->
    <link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/main_style.css" rel="stylesheet" type="text/css"/>
    <link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/form_style.css" rel="stylesheet" type="text/css"/>
    <link href="https://exactestate.sfo2.digitaloceanspaces.com/static/css/animation_css.css" rel="stylesheet" type="text/css"/>
    <script src="https://exactestate.sfo2.digitaloceanspaces.com/static/js/local_timezone_cookie.js"></script>



</head>

    <style>
    .example{
        border: solid black;
    }
    </style>



<body>
<div class="main">
    <header>

      <style>
    #logo {
        vertical-align: middle;
        width: 50px;
    }

    .navbar-brand span {
        color: white;
        font-size: 2rem;
        line-height: 1.2;
        font-weight: 200;
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 15px;
    }

    .navbar-brand b {
        display: block;
        font-size: 50%;
        line-height: 1;
    }

    @media (min-width: 992px) {
        #applicationsMenu {
            margin-left: 100px;
            margin-top: -50px;
        }
        #documentsMenu {
            margin-left: 100px;
        }
        #accountMenu {
            position: absolute !important;
            top: 5px;
            right: 10px;
        }
    }

</style>


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-toggler-right ml-auto">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
        <div class="float-left">
            <!-------------------------------------------------------------------------------------------------------no fle -->
            <a class="navbar-brand" href="#"><img id="logo" alt="Logo" src="https://exactestate.sfo2.digitaloceanspaces.com/static/images/logo_white.png">
                <span class="d-lg-none">ExactEstate<b>Management Software</b></span>
            </a>
            <ul id="applicationsMenu" class="navbar-nav">
                <!-------------------------------------------------------------------------------------------------------Users-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="fas fa-users" style="color:white;"></i> Users
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'users_create' CLIENT.id %}"><i
                                class="far fa-user-plus"></i> Register User</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'users_index' CLIENT.id %}"><i
                                class="fas fa-users"></i> Users</a>
                    </div>
                </li>
                <!-------------------------------------------------------------------------------------------------------Applications-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                        <i class="fa fa-book" style="color:white;"></i> Applications
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="{% url 'applications_create' CLIENT.id %}">
                            <i class="fas fa-file-plus"></i> New Application</a>

                        <a class="dropdown-item" href="{% url 'applications_index' CLIENT.id %}">
                            <i class="fas fa-cabinet-filing"></i> Existing Applications</a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item"
                        href="{% url 'applications_processing_management' CLIENT.id %}">
                            <i class="far fa-ballot-check"></i> Management Processing</a>
                        <a class="dropdown-item"
                        href="{% url 'applications_processing_compliance' CLIENT.id %}">
                            <i class="fas fa-ballot-check"></i> Compliance Processing</a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item"
                        href="{% url 'applications_preleasing' CLIENT.id %}">
                            <i class="fa fa-book"></i> Application Dashboard and Preleasing</a>
                    </div>
                </li>
                <!-------------------------------------------------------------------------------------------------------Properties-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button">
                        <i class="far fa-building" style="color:white;"></i> Properties
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'properties_index' CLIENT.id %}">
                            <i class="far fa-building"></i> Properties</a>
                        <a class="dropdown-item" href="{% url 'properties_units_search' CLIENT.id %}">
                            <i class="fas fa-bed"></i> Units</a>
                        <a class="dropdown-item" href="{% url 'properties_water_billing_index' CLIENT.id %}">
                            <i class="far fa-tint"></i> Water Billing</a>

                        <a class="dropdown-item" href="{% url 'merchant_accounts_index' CLIENT.id %}">
                            <i class="far fa-usd-square"></i> Merchants</a>
                    </div>
                </li>
                <!-------------------------------------------------------------------------------------------------------Prospects-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="far fa-layer-plus" style="color:white;"></i> Prospects
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'guest_cards_index' CLIENT.id %}">
                            <i class="fal fa-id-card-alt"></i> Guest Cards
                        </a>
                        <a class="dropdown-item" href="{% url 'appointments_index' CLIENT.id %}">
                            <i class="fal fa-phone"></i> Appointments
                        </a>

                    </div>
                </li>
                <!-------------------------------------------------------------------------------------------------------Residents-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="far fa-people-carry" style="color:white;"></i> Residents
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'residents_ledgers_index' CLIENT.id %}">
                            <i class="far fa-file-invoice-dollar"></i> Ledgers</a>
                        <a class="dropdown-item" href="{% url 'residents_late_fees' CLIENT.id %}">
                            <i class="far fa-file-invoice-dollar"></i> Late Fee Declaration</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'residents_index' CLIENT.id %}">
                            <i class="fas fa-search"></i> Resident Search</a>
                        <a class="dropdown-item" href="{% url 'residents_extras_index' CLIENT.id %}">
                            <i class="fas fa-plus-square"></i> Resident Extras</a>
                        <a class="dropdown-item" href="{% url 'residents_create' CLIENT.id %}">
                            <i class="fal fa-person-booth"></i> Enter Residents</a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item" href="{% url 'residents_renewals' CLIENT.id %}">
                            <i class="fal fa-calendar-plus"></i> Renewals</a>
                        {#                    <a class="dropdown-item" href="\23\residents\renewal_settings\">#}
                        {#                        <i class="fal fa-cog"></i> Renewal Settings</a>#}
                    </div>
                </li>
            <!-------------------------------------------------------------------------------------------------------Tasks-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="fas fa-tasks" style="{% if OPEN_TASKS %}color:red;{% else %}color:white;{% endif %}"></i>&nbsp;Tasks
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'tasks_create' CLIENT.id %}">
                            <i class="far fa-plus"></i> Create </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'tasks_list' CLIENT.id %}">
                            <i class="fal fa-eye" style="{% if OPEN_USER_TASKS %}color:red;{% endif %}"></i> View Completable Tasks
                        </a>
                        <a class="dropdown-item" href="{% url 'tasks_status' CLIENT.id %}">
                            <i class="fal fa-eye" style="{% if OPEN_SYSTEM_TASKS %}color:red;{% endif %}"></i> View Created Tasks
                        </a>
                    </div>
                </li>
            <!----------------------------------------------------------------------------------------------------Reports-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="fas fa-file-chart-line" style="color:white;"></i>&nbsp;Reports
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'reports_index' CLIENT.id %}">
                            <i class="far fa-file-chart-line"></i> Reports
                        </a>
                    </div>
                </li>

            </ul>

            <ul id="documentsMenu" class="navbar-nav">
                <!------------------------------------------------------------------------------------------------------Documents-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                        <i class="fas fa-folder-open" style="color:white;"></i> Documents
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="{% url 'documents_upload' CLIENT.id %}">
                            <i class="far fa-file-upload"> </i> Upload Documents </a>
                        <a class="dropdown-item" href="{% url 'documents_index' CLIENT.id %}">
                            <i class="far fa-file-download"></i> Download Documents </a>
                        <a class="dropdown-item" href="{% url 'documents_builder_index' CLIENT.id %}">
                            <i class="far fa-hard-hat"></i> Document Builder </a>
                    </div>
                </li>
                <!------------------------------------------------------------------------------------------------------Forms-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                        <i class="fab fa-wpforms" style="color:white;"></i> Forms
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="{% url 'forms_index' CLIENT.id %}">
                            <i class="fab fa-wpforms"></i> View Forms</a>
                        <a class="dropdown-item" href="{% url 'forms_declarations_index' CLIENT.id %}">
                            <i class="fab fa-wpforms"></i> Create Form Declarations</a>
                    </div>
                </li>
            <!-------------------------------------------------------------------------------------------------------Work Orders-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="far fa-user-hard-hat" style="color:white;"></i> Work Orders
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navDropdown">
                        <a class="dropdown-item" href="{% url 'work_orders_declarations' CLIENT.id %}">
                            <i class="fal fa-flag-checkered"></i> Work Order Declaration </a>
                        <a class="dropdown-item" href="{% url 'work_orders_index' CLIENT.id %}">
                            <i class="fal fa-eye"></i> View Work Orders
                        </a>
                        <a class="dropdown-item" href="{% url 'work_orders_submit' CLIENT.id %}">
                            <i class="fas fa-clipboard-list"></i> Submit Work Order
                        </a>
                    </div>
                </li>
                <!-------------------------------------------------------------------------------------------------------Visitors-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#"
                    id="navbarDropdown" role="button"
                    data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                        <i class="fa fa-user-plus" style="color:white;"></i> Visitors
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="{% url 'visitors_enter' CLIENT.id %}"><i class="fas fa-user-plus"></i> Enter
                            Visitor</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'visitors_index' CLIENT.id %}"><i class="fas fa-users"></i> Visitors</a>
                    </div>
                </li>

                <li id="accountMenu" class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#"
                    role="button"
                    data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                        <i class="fas fa-user" style="color: white"></i> Account
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navDropdown">
                        <h4 style="text-align:center;">Account </h4>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'update_account' CLIENT.id %}">
                            <i class="far fa-edit"></i> Edit Account Information</a>
                        <a class="dropdown-item" href="{% url 'login_logout' CLIENT.id %}">
                            <i class="far fa-sign-out-alt"></i> Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

    </header>


</div>
<footer>
    <div class="accent_color" style="height:5px;"></div>
    <div class="over_copyright" style="min-height: 25px;">
        <div class="container-fluid center">
            <div class="row">

    <div class="col-sm-6"><p class="in_footer_text" style="text-align: left;"></p></div>
<div class="col-sm-6"><p class="in_footer_text" style="text-align: right;"></p></div>

            </div>
        </div>
    </div>
    <p class="in_footer_text">&copy; ViaTech Systems&reg; 2019. All Rights Reserved.</p>
</footer>

</body>
</html>
...