Our Little Church DIY:
Code Modifications for Navigation Bar

Written For Christ has provided a template with several pages, which you may want to add or subtract web pages to the Navigation Bar.

Include New Web Page in Navigation Bar

Let us assume you have created Troop2000.php web page for the Troop 2000, and you want to add a pull-down group called Partnership. Under Partnership you would like to add Troop 2000 and other groups.

For the Navigation Bar, the nav.php is the key file. The nav.php file is located at /view/nav.php and handles the Navigation Bar. The core portion of the nav.php file is listed below.

Before making any changes to the nav.php file, make a backup of the nav.php file. Copy the nav.php file and paste the file in the view file with the name like nav.php.bak Now you are ready to view the nav.php file with you HTML editor.


    <div id="navbar">
        <nav>
            <div class="topnav" id="myTopnav">
                <a class="btn" href="index.php" >Home</a>
                <div class="dropdown">
                    <button class="dropbtn">Ministry &#9660;</button>
                    <div class="dropdown-content">
                        <a class="btn" href="Ministries_Nursery.php">Nursery</a>
                        <a class="btn" href="Ministries_Children.php">Children</a>
                        <a class="btn" href="Ministries_Youth.php">Youth</a>
                        <a class="btn" href="Ministries_Adult.php">Adult</a>
                        <a class="btn" href="Ministries_Care.php">Member Care</a>
                        <a class="btn" href="Ministries_Serve_Church.php">Serve Church</a>
                        <a class="btn" href="Ministries_Outreach.php">Outreach</a>
                    </div>
                </div>
                <a class="btn" href="Giving.php">Give</a>
                <a class="btn" href="AboutUs.php">About</a>
                <a href="javascript:void(0);" class="icon" onclick="navBarIcon()">&#9776;</a>
            </div>
        </nav>
    </div>
<script>
...

Modify Navigation Bar

The opening <div> has to match the closing </div> count.

The code should now look something like the below code.


    <div id="navbar">
        <nav>
            <div class="topnav" id="myTopnav">
                <a class="btn" href="index.php" >Home</a>
                <div class="dropdown">
                    <button class="dropbtn">Ministry &#9660;</button>
                    <div class="dropdown-content">
                        <a class="btn" href="Ministries_Nursery.php">Nursery</a>
                        <a class="btn" href="Ministries_Children.php">Children</a>
                        <a class="btn" href="Ministries_Youth.php">Youth</a>
                        <a class="btn" href="Ministries_Adult.php">Adult</a>
                        <a class="btn" href="Ministries_Care.php">Member Care</a>
                        <a class="btn" href="Ministries_Serve_Church.php">Serve Church</a>
                        <a class="btn" href="Ministries_Outreach.php">Outreach</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">Partnership &#9660;</button>
                    <div class="dropdown-content">
                        <a class="btn" href="Troop2000.php">Troop 2000</a>
                    </div>
                </div>
                <a class="btn" href="Giving.php">Give</a>
                <a class="btn" href="AboutUs.php">About</a>
                <a href="javascript:void(0);" class="icon" onclick="navBarIcon()">&#9776;</a>
            </div>
        </nav>
    </div>
<script>
...

Save and Test