<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="company-logo"> <img src="https://www.abc.org/portals/1/2025/ABC%2075th%20Anniversary%20Logo_color%20(4).png" alt="Company Logo"> </div> <!-- Floating Navigation Menu ~MK--> <nav class="vertical-nav"> <div class="nav flex-column" id="myCompanyTabs" role="tablist"> <a class="nav-link active" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="true" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Profile</span> </a> <a class="nav-link" id="nav-CSICodes-tab" data-toggle="tab" href="#nav-CSIcodes" role="tab" aria-controls="nav-CSIcodes" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span data-tooltip="MasterFormat® CSI Code(s) = work classifications defined by The Construction Specifications Institute, Inc. used to categorize and specify all construction work. FindContractors.com returns search results for the CSI code you specify (e.g. lighting), followed in order by those in more specific (interior lighting) and broader (electrical) classifications. The trademark MasterFormat® and the copyrighted MasterFormat work are used under license from The Construction Specifications Institute, Inc. (http://www.csiresources.org) (http://www.crosswalk.biz)."> <span class="navSpanText">MasterFormat® CSI Code(s) (Scope of Work)</span> </span> </a> <a class="nav-link" id="nav-NAICScodes-tab" data-toggle="tab" href="#nav-NAICScodes" role="tab" aria-controls="nav-NAICScodes" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span data-tooltip="NAICS codes = The North American Industry Classification System for member companies. Code 23 is commonly used to classify contractor members as well as some supplier members. Codes 52, 53, 54 and 55 are common classifications for associate members as well as some supplier members."> <span class="navSpanText">NAICS (Type of Work)</span> </span> </a> <a class="nav-link" id="nav-designations-tab" data-toggle="tab" href="#nav-designations" role="tab" aria-controls="nav-designations" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span data-tooltip="Select any of the following federal company designations if you would like them to appear in the search results."> <span class="navSpanText">Designations</span> </span> </a> <a class="nav-link" id="nav-address-tab" data-toggle="tab" href="#nav-address" role="tab" aria-controls="nav-address" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Address</span> </a> <a class="nav-link" id="nav-contactInfo-tab" data-toggle="tab" href="#nav-contactInfo" role="tab" aria-controls="nav-contactInfo" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Contact Info</span> </a> <a class="nav-link" id="nav-safety-tab" data-toggle="tab" href="#nav-safety" role="tab" aria-controls="nav-safety" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Safety & Quality</span> </a> <a class="nav-link" id="nav-awards-tab" data-toggle="tab" href="#nav-awards" role="tab" aria-controls="nav-awards" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Awards & Key Projects</span> </a> <a class="nav-link" id="nav-markets-tab" data-toggle="tab" href="#nav-markets" role="tab" aria-controls="nav-markets" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Market Segments</span> </a> <!--- IDs, hfrefs, aria controls, and span content needs to be changed to reflect your new items ~MK -----> <a class="nav-link" id="nav-ph1-tab" data-toggle="tab" href="#nav-ph1" role="tab" aria-controls="nav-ph1" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Placeholder 1</span> </a> <a class="nav-link" id="nav-ph2-tab" data-toggle="tab" href="#nav-ph2" role="tab" aria-controls="nav-ph2" aria-selected="false" data-feathr-click-track="true" data-feathr-link-aids="645a47cb1a82587f5411cb0f"> <span class="navSpanText">Placeholder 2</span> </a> </div> </nav> <!-- Content wraps around the floated navigation ~MK --> <div class="content-wrapper"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <h3>Profile</h3> <p>Profile content goes here. This content will wrap around the navigation menu on desktop screens, flowing naturally to the right of the menu. On mobile devices, the content will display below the navigation.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="tab-pane fade" id="nav-CSIcodes" role="tabpanel" aria-labelledby="nav-CSICodes-tab"> <h3>MasterFormat® CSI Code(s)</h3> <p>CSI codes content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-NAICScodes" role="tabpanel" aria-labelledby="nav-NAICScodes-tab"> <h3>NAICS (Type of Work)</h3> <p>NAICS codes content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-designations" role="tabpanel" aria-labelledby="nav-designations-tab"> <h3>Designations</h3> <p>Designations content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-address" role="tabpanel" aria-labelledby="nav-address-tab"> <h3>Address</h3> <p>Address content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-contactInfo" role="tabpanel" aria-labelledby="nav-contactInfo-tab"> <h3>Contact Info</h3> <p>Contact information goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-safety" role="tabpanel" aria-labelledby="nav-safety-tab"> <h3>Safety & Quality</h3> <p>Safety and quality content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-awards" role="tabpanel" aria-labelledby="nav-awards-tab"> <h3>Awards & Key Projects</h3> <p>Awards and key projects content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane fade" id="nav-markets" role="tabpanel" aria-labelledby="nav-markets-tab"> <h3>Market Segments</h3> <p>Market segments content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <!--- Change these placeholders! ~MK --> <div class="tab-pane fade" id="nav-ph1" role="tabpanel" aria-labelledby="nav-ph1-tab"> <h3>Placeholder 1</h3> <p>Placeholder 1 content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <!--- Change these placeholders! ~MK --> <div class="tab-pane fade" id="nav-ph2" role="tabpanel" aria-labelledby="nav-ph2-tab"> <h3>Placeholder 2</h3> <p>Placeholder 2 content goes here. This content wraps around the navigation menu.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <!----content wrapper ~MK ----> </div> <!---container ~MK --->

/* Company logo section */ .company-logo { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 2rem; margin-bottom: 20px; text-align: center; } .company-logo img { max-width: 100%; height: auto; } /* Vertical navigation styling - floating on desktop */ .vertical-nav { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 1rem; margin-bottom: 20px; margin-right: 20px; width: 280px; } .vertical-nav .nav { flex-direction: column; border-bottom: none; } .vertical-nav .nav-link { text-align: left; border: none; border-left: 3px solid transparent; border-radius: 0; padding: 0.75rem 1rem; margin-bottom: 0.25rem; transition: all 0.3s ease; } .vertical-nav .nav-link:hover { background-color: #e9ecef; border-left-color: #007bff; } .vertical-nav .nav-link.active { background-color: #007bff; color: #fff; border-left-color: #0056b3; } .navSpanText { display: block; } /* Tooltip styling */ [data-tooltip] { position: relative; cursor: help; } /* Content area that wraps around floated nav */ .content-wrapper { overflow: hidden; } /* Desktop: float navigation left */ @media (min-width: 769px) { .vertical-nav { float: left; } } /* Mobile responsive */ @media (max-width: 768px) { .vertical-nav { float: none; width: 100%; padding: 0.5rem; margin-right: 0; } .vertical-nav .nav-link { padding: 0.5rem 0.75rem; font-size: 0.9rem; } }