Headers and Footers

The NYC Core Framework includes official NYC headers and footers ready for you to use. The following files provide a variety of options that you can customize to best fit your needs. 

                            
                                nyc-core-framework/
                                ├── landing-page-nav-across-search.html
                                ├── landing-page-nav-across.html
                                ├── landing-page-nav-right-search.html
                                └── landing-page-nav-right.html

Primary Navigation

Primary navigation is build with Bootstrap's nav component. This enables you to mix dropdowns with direct links. For style and behavior consistency, drop-downs and links both use <a> tags. For screen reader users, role="button" is present on <a> tags that are dropdowns.

Header with primary navigation below the logo

Header with primary navigation right of the logo

Exposed Search

Language translation and search is accessible to users via icon toggle buttons. These buttons use Bootstrap's collapse feature. A small amount of Javascript is present in js/main.js to allow the language and search buttons to close one another as they open.

Header with search within the primary navigation below

Header with search within the primary navigation right

To include a search bar within your navigation, add class .nav-item-search to .nav-item. Within this tag, use the following form code: 

                            
                                <div class="nav-item nav-item-search">
                                    <form aria-label="Search" role="search">
                                        <label class="sr-only" for="global-search-bar">Search</label>
                                        <input id="global-search-bar" placeholder="Search">
                                        <button class="no-btn-style" type="button">
                                            <span class="fas fa-search" title="Search" ></span>
                                        </button>
                                    </form>
                                </div>
                                <!-- .nav-item -->

Customization

We've made it easy to customize the global header and footer. Sass for the header and footer is located in scss/_f-layout-elements.scss under A. Citywide header and footer. Here you will find options for link color, font-weight, and active states.

Additionally, you can apply a dark background color to the header by setting $global-header-dark to true. Settings for a dark header are found inside a conditional statement below the $global-header-dark variable: 

                            
                                // Reset variables for dark header
                                @if $global-header-dark {

                                    $global-header-bg-color: $primary;

                                    $global-header-border-color: rgba(black, 0.5);
                                    $primary-nav-link-color: $white;
                                }

Header with a colored background

Language Translation

Translation is included using Google Translate. In the header, all languages are available as a <select> menu. In the footer, NYC's ten legally-required languages are available as links. The Javascript to acheive translation in the footer is present in js/main.js.