+ Start a Discussion
Holly Havelka 10Holly Havelka 10 

Help hiding a Visualforce Tab in a Community based on conditional criteria

Hi all,

Does anyone know of a way to display or not display a Visualforce Tab in a custom Salesforce Tabs + Visualforce Page community?

This requirement would be based on whether a field value is marked as 'Display' in custom settings.  The Visualforce page has a custom controller.  Is there a way to modify my controller to only show Visualforce Tab in navigation if this field is marked?

Any ideas or suggestions are greatly appreciated!

Holly

 
Best Answer chosen by Holly Havelka 10
Holly Havelka 10Holly Havelka 10
Hi all, I ended up using the below to get my requirement to work:
 
.wt-Application {
            display: {!IF(isDisplayed, 'initial', 'none!important')};
    }

 

All Answers

Nayana KNayana K
I am not sure whether I have understood properly. 
I am assuming you are talking about apex:tab tag. If yes, suppose you have hierarchy custom setting  (Say, we have checkbox named Display) then we can do something like this:
<apex:tab rendered="{!$Setup.CUSTOM_SETTING_API_NAME.Display__c}" />

 
Holly Havelka 10Holly Havelka 10
Nayana K, thanks for responding.  I am actually trying to hide the top header navigation Visualforce Tab based on those requirements.  See image below.  

User-added image

So, if in my custom settings (list not hierarchy), if the checkbox for Display__c is NOT checked, the Application tab should be hidden.
Nayana KNayana K
My bad, I don't have much idea on this piece.
Hemant_SoniHemant_Soni
Hi Holly,
You need to put condition like
<apex:outputPanel layout="none"  rendered="{!IF(Custom SettingRefrence.field == "true"),false,true}"></apex:outputpanel>
If you are not getting then let me know. We can connect on skype.
Thanks
Hemant
 
Holly Havelka 10Holly Havelka 10
Hermant_Soni, thanks for responding.  Here is my visualforce page for Application tab:
<apex:page controller="ApplicationSubmissionController">
    
    <apex:stylesheet value="{!URLFOR($Resource.customerPortalBranding)}"/>

    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'name-spaced-bootstrap.css')}" />

    <style>
        
        /*
        .rich-tabhdr-cell-active > table{
            width: 100%;
        }  
        
        .ui-tabs .ui-tabs-nav li {
            border: none;
            width:19.5%;
        }
        .ui-tabs .ui-tabs-nav li a {
            display:block;
            width:87%;
        }
        .ui-tabs .ui-tabs-nav a { 
            vertical-align: center;
            text-align: center;
           background-color: #0074c9;
        }

        .ui-tabs .ui-tabs-nav a:hover{
            opacity: .7!important;
            transition: all .4s ease-in-out!important;
        }
        .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { 
            background-color: #0074c9;
            cursor: pointer !important;
        }
        .ui-tabs .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0px !important;
        }
        /*
        #tabs .ui-widget-header {
         background-color: #0074c9;
         background-image:none;
        }

        #tabs .ui-state-default a { 
            color: #fff !important; 
        }
        #tabs .ui-state-active a { 
            color: white !important; 
        }
        #tabs .ui-state-hover a, .ui-state-focus a { 
            color: white !important;
        }
        */
        .bPageBlock .detailList .dataCol {
           width: 100% !important;
        }
        input.btn.customButton{
            font-family: Arial,Helvetica,sans-serif !important;
            font-size: .9em !important;
            width: 70px;
            position: relative;
        }
        input.btn.customButton.buttonPrevious{
            left: 5px;
        }
        input.btn.customButton.lastButtonPrevious{
            left: 5px;
        }
        input.btn.customButton.saveButton{
            left: 328px;
        }
        input.btn.customButton.saveButton.first{
            left: 400px;
        }
        input.btn.customButton.buttonNext{
            left: 648px;
        }
        input.btn.customButton.buttonNext.first{
            left: 720px;
        }
        .frozenLabel {
            display: block;
            color: #a94442;
            font-weight: bold!important;
        }
        #messageContainer .pbBody > div {
            font-size: 14px;
            font-weight: bold;
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
        
        .ui-tabs .ui-tabs-panel {
            padding: 0em 0em!important;
        
        }

        .ui-widget-content {
            border: 0px solid #aaaaaa!important;
        }

        .ui-widget-header {
            border: 0px solid #aaaaaa!important;
            background: none!important;
        }

        .buttonDiv {
            padding-top: 10px!important;
        }

        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
            background: #0074c9!important;

        }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
            color: #fff!important;
        }
        
        body a {
            color: #4d4d4d !important;
            font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif!important;
            font-weight: bold!important;
            text-decoration: none!important;
        }

        .tw-bs .nav>li>a:hover, .tw-bs .nav>li>a:focus {
            background-color: transparent!important;
        }

    </style>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"/>
    <script type="text/javascript" src="https://cdn.rawgit.com/jmont75/spin.js/master/spin.js"></script>

    <script>
        
        $(function() {
            $( "#tabs" ).tabs({
                beforeActivate: function( event, ui ) {
                    if ($('label[style *= "color: red"]:visible').size() != 0){
                        event.preventDefault();
                    }
                }
            });
          });
        $(function() {
            $('.btn.customButton.buttonNext').click(function( event ) {
                event.preventDefault();
            });
            $('.btn.customButton.buttonPrevious').click(function( event ) {
                event.preventDefault();
            });
            $('.btn.customButton.lastButtonPrevious').click(function( event ) {
                event.preventDefault();
            });
            $('.btn.customButton.saveButton').click(function( event ) {
                event.preventDefault();
            });
        });
        window.onload = init;

        function init() {
            var tables = document.getElementsByClassName('makeRows');
            for (var i = 0; i < tables.length; i++) {
                table = tables[i];
                makeRows(table, 2);
            }
            tables = document.getElementsByClassName('subjectChecks');
            for (var i = 0; i < tables.length; i++) {
                table = tables[i];
                makeRows(table, 3);
            } 
            tables = document.getElementsByClassName('scholarshipCheck');
            for (var i = 0; i < tables.length; i++) {
                table = tables[i];
                makeRows(table, 3);
            } 
            if ('{!actualApplication.AppStatus__c}' != 'Application In Progress'){
                $('#tabs :input').prop('disabled', true);
            }
        }

        function makeRows(table, columnCount) {
            var cells = table.rows[0].cells;
            var cellCount = cells.length;
            var rowCount = Math.ceil(cellCount / columnCount);

            for (var i = 0; i < rowCount; i++) {
                table.insertRow(0);
            }
            for (var i = 0; i < cellCount; i++) {
                row = Math.floor(i / columnCount);
                table.rows[row].appendChild(cells[i].cloneNode(true));
            }
            table.deleteRow(rowCount);
        } 

        function hideElement(selector, myValue, elementClass, inputFieldId) {
            if (selector.value == myValue){
                document.getElementsByClassName(elementClass)[0].style.display = '';
            } else {
                document.getElementsByClassName(elementClass)[0].style.display = 'none';
                $('*[id$="'+inputFieldId+'"]')[0].value = '';
            }
        }

        function showOther(selector, value, elementClass, inputFieldId) {
            if (selector.checked && (selector.value == value)){
                document.getElementsByClassName(elementClass)[0].style.display = '';
            } else if (!selector.checked && (selector.value == value)){
                document.getElementsByClassName(elementClass)[0].style.display = 'none';
                $('input[id$="'+inputFieldId+'"]')[0].value = '';
            }
        }
        function nextTab(){
            if ($('label[style *= "color: red"]:visible').size() == 0){
                var tabIndex = $( '#tabs' ).tabs('option', 'active');
                $( '#tabs' ).tabs({ active: (tabIndex+1) });
            }
        }
        function previousTab(){
            if ($('label[style *= "color: red"]:visible').size() == 0){
                var tabIndex = $( '#tabs' ).tabs('option', 'active');
                $( '#tabs' ).tabs({ active: (tabIndex-1) });
            }
        }
        $(document).ready(function() {
            var numberFields = document.getElementsByClassName('numberInput');
            for (var i = 0; i < numberFields.length; i++) {
                numberFields[i].addEventListener('keydown',function (e) {
                    // Allow: backspace, delete, tab, escape, enter and .
                    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                         // Allow: Ctrl+A
                        (e.keyCode == 65 && e.ctrlKey === true) ||
                         // Allow: Ctrl+C
                        (e.keyCode == 67 && e.ctrlKey === true) ||
                         // Allow: Ctrl+X
                        (e.keyCode == 88 && e.ctrlKey === true) ||
                         // Allow: home, end, left, right
                        (e.keyCode >= 35 && e.keyCode <= 39)) {
                             // let it happen, don't do anything
                             return;
                    }
                    // Ensure that it is a number and stop the keypress
                    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                        e.preventDefault();
                    }
                });
            }
        });
        pageOneSaved = true;
        pageTwoInfoSaved = true;
        pageTwoResumeSaved = true;
        pageTwoTranscriptSaved = true;
        pageThreeSaved = true;
        pageFourSaved = true;
        pageFiveSaved = true;
        $(window).on('beforeunload', function(){
            if(!pageOneSaved || !pageTwoInfoSaved || !pageTwoResumeSaved || !pageTwoTranscriptSaved || !pageThreeSaved || !pageFourSaved || !pageFiveSaved){
                return 'You have unsaved changes. Are you sure you want to leave without saving?';
            }
        });

        var spinner = null;
        var spinner_div = 0;

        function showSpinner() {
            var opts = {
              lines: 9, // The number of lines to draw
              length: 9, // The length of each line
              width: 6, // The line thickness
              radius: 11, // The radius of the inner circle
              corners: 1, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              direction: 1, // 1: clockwise, -1: counterclockwise
              color: '#000', // #rgb or #rrggbb
              speed: 0.6, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e15, // The z-index (defaults to 2000000000)
              top: '50px', // Top position relative to parent in px
              left: '480px' // Left position relative to parent in px
            };
            spinner_div = $('#spinner').get(0);
            spinner_div.style.display = '';
            spinner = new Spinner(opts).spin(spinner_div);
            $('#tabs')[0].style.display = 'none';
        }

        function hideSpinner() {
            spinner.stop(spinner_div);
            spinner_div.style.display = 'none';
            $('#tabs')[0].style.display = '';
        }

        function checkEmail(emailField){
            if (!emailField.checkValidity() && emailField.nextSibling == null){
                emailField.style.borderColor = 'red';
                emailField.style.borderWidth = '3px';
                $('<label style="color: red; font-weight: bold; display: block;">That email is invalid</label>').insertAfter(emailField)
            } else if (emailField.checkValidity() && emailField.nextSibling != null){
                    emailField.style.borderColor = '';
                    emailField.style.borderWidth = '';
                    emailField.nextSibling.remove()
            }
        }

        function checkMinLength(field, expectedLength){
            if (field.value.length < expectedLength && field.nextSibling == null){
                field.style.borderColor = 'red';
                field.style.borderWidth = '3px';
                $('<label style="color: red; font-weight: bold; display: block;">The length can not be less '+expectedLength+' characters</label>').insertAfter(field)
            } else if (field.value.length >= expectedLength && field.nextSibling != null){
                    field.style.borderColor = '';
                    field.style.borderWidth = '';
                    field.nextSibling.remove()
            }
        }

    </script>

        <div id="messageContainer">
            <apex:pageBlock rendered="{!AND(actualApplication.Frozen__c , actualApplication.AppStatus__c == 'Application In Progress', backdoorApplicationOpen)}">
        
                <apex:pageBlockSection columns="1" collapsible="false">
                    <apex:outputLabel styleClass="frozenLabel" value="{!$Label.TFA_ApplicationStatusFrozen}" escape="false"/>
                </apex:pageBlockSection>
        
            </apex:pageBlock>
        </div>
        
        <apex:form rendered="{!OR(AND(NOT(actualApplication.Frozen__c), NOT(ISBLANK(actualApplication.Id)), (NOT(isRegularDeadlineReach) || backdoorApplicationOpen)), actualApplication.Frozen__c && actualApplication.AppStatus__c == 'Offer Accepted', actualApplication.Frozen__c && actualApplication.AppStatus__c == 'Offer Pending')}" html-novalidate="novalidate">
            <div id='spinner' class='spinner' style="background-color:#D8D9DB; background:none !important; height: 100px; display: none"></div>

            <div id="tabs">
                <div class="tw-bs">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#tabs-1">Profile</a></li>
                        <li role="presentation"><a href="#tabs-2">Experience</a></li>
                        <li role="presentation"><a href="#tabs-3">Short Answer</a></li>
                        <li role="presentation"><a href="#tabs-4">Preferences</a></li>
                        <li role="presentation"><a href="#tabs-5">Submission</a></li>
                    </ul>
                </div>

                <apex:pageMessages />
                <div class="message infoM3" id="appSaved" role="alert" style="display: none;">
                    <table border="0" cellpadding="0" cellspacing="0" class="messageTable" style="padding:0px;margin:0px;">
                        <tbody>
                            <tr valign="top">
                                <td>
                                    <img alt="INFO" class="msgIcon" src="/s.gif" title="INFO"/>
                                </td>
                                <td class="messageCell">
                                    <div id="j_id0:j_id5:j_id7:j_id8:j_id9:0:j_id10:j_id11:j_id13" class="messageText">
                                        <span id="j_id0:j_id5:j_id7:j_id8:j_id9:0:j_id10:j_id11:j_id14">
                                            <h4></h4>
                                        </span>
                                        Application saved.
                                        <br/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div id="tabs-1">
                    <c:ProfileSubmit actualContact="{!actualContact}" actualApplication="{!actualApplication}"/>
                </div>

                <div id="tabs-2">
                    <c:ExperienceSubmit actualApplication="{!actualApplication}" resumeFile="{!resumeFile}" transcriptFile="{!transcriptFile}" recommendation="{!recommendation}" confirmEmail="{!emailConfirmation}" breakthroughPreviousExperienceCheckbox="{!breakthroughPreviousExperienceCheckbox}" languagesCheckbox="{!languagesCheckbox}" rolesInOrganizationCheckbox="{!rolesInOrganizationCheckbox}" recommender="{!recommender}"/>
                </div>

                <div id="tabs-3">
                    <c:EssaysSubmit actualApplication="{!actualApplication}"/>
                </div>

                <div id="tabs-4">
                    <c:PreferencesSubmit actualApplication="{!actualApplication}" excitedToTeachNewCheckbox="{!excitedToTeachNewCheckbox}" couldTeachNewCheckbox="{!couldTeachNewCheckbox}" couldNotTeachNewCheckbox="{!couldNotTeachNewCheckbox}" departmentToChairCheckbox="{!departmentToChairCheckbox}"/>
                </div>

                <div id="tabs-5">
                    <c:SubmissionSubmit actualApplication="{!actualApplication}" affiliationsScholarshipsCheckbox="{!affiliationsScholarshipsCheckbox}" howDidYouHearAboutUsCheckbox="{!howDidYouHearAboutUsCheckbox}"/>
                </div>
                
                <apex:outputPanel styleClass="buttonDiv" style="padding-top: 0px; padding-bottom: 11px;" rendered="{!actualApplication.AppStatus__c == 'Application In Progress'}">
                    <apex:commandButton action="{!submitApplication}" value="Submit" styleClass="customButton" reRender="" onclick=""/>
                </apex:outputPanel>

            </div>
        </apex:form>

        <apex:form rendered="{!ISBLANK(actualApplication.Id) && (NOT(isRegularDeadlineReach) || (backdoorApplicationOpen && NOT(backdoorApplicationClosed)))}">
            <apex:pageBlock >
                    <apex:outputPanel styleClass="buttonDiv" >
                        <apex:commandButton action="{!newApplication}" onclick="this.disabled = true;" oncomplete="location.reload()" value="New Application" styleClass="customButton" style="width:116px" reRender=""/>
                    </apex:outputPanel>
            </apex:pageBlock>
        </apex:form>

</apex:page>


 
Holly Havelka 10Holly Havelka 10
Hermant, I am not sure where I would insert your suggestion?
Holly Havelka 10Holly Havelka 10
Here is the Community Header page:
<!DOCTYPE html>
	<style type="text/css">
        #page{
			width: 965px;
			margin: 0px auto;
		}
        div[role="banner"]{
            border: 12px solid white;
        }
        .custom-header {
            padding: 18px 0 !important;
            padding-bottom: 5px !important;
        }
		.zen .zen-headerTop {
			margin-bottom: 0px !important;
		}
        .zen .zen-headerTop#appHeaderTop .zen-branding {
            width: 15% !important;
        }

        .zen .zen-branding {
            padding-left: 0px !important;
        }

		.header-logo {
			float: left !important;
		}
		.zen-navViaSearch {
			display: inline-block !important;
			height: 55px !important;
			vertical-align: middle !important;
		}
        .zen-menu {
            height: 59px !important;
        }
		#social-media-icons {
			display: inline-block !important;
			vertical-align: middle !important;
			color: #fff !important;
		}
		/*
        #phSearchForm {
			margin-top: 15px !important;
		}
		#phSearchInput {
			margin-top: 10px !important;
		}
        */
        #settings-menu {
            float: right !important;
        }
        #userNav {
            margin-top: 15px !important;
            margin-right: 10px !important;
        }
        #userNavButton {
            white-space: inherit !important;
            padding: 0 24px !important;
        }
        .zen .zen-headerBottom{
            border-radius: 0 !important;
            box-shadow: none !important;
        }
        .zen #tabContainer{
            background: #fff!important;
        }
        .zen .zen-navViaMenus a, .zen .zen-headerBottom a{
            color: #4d4d4d !important;
        }
        .zen-active{
            border-radius: 0 !important;
            box-shadow: none !important;
            background-image: none !important;
        }
        
        #AppBodyHeader {
            /*border: 12px solid white;*/
            width: 965px;
            margin: 10px auto;
        }
        
        .custom-header#AppBodyHeader {
            border: 0px;
            width: 965px;
            margin: 0px auto;
        }
        /*
        html .brandPrimaryBrd {
            border-top-color: #FFFFFF!important;
        }
        */

        html .brandSecondaryBrd{
            border-color: #0074c9!important;
        }

        #tabBar {
            text-align: center;
            font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif!important;
            font-weight: bold;
            font-size: 14px!important;
            height: 37px;
        }
        #tabContainer {
            box-shadow: none;
        }
        
        .bodyDiv{
            border-top: 0px!important;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            box-shadow: 0 0 0 hsla(0,0%,0%,0)!important;
            width: 965px;
            margin: 0px auto;
            float: none;
            min-width: 0;
        }
        /*
        #bodyTable{
            background-color: #D8D9DB;
            border: 12px solid white;
            border-top: 0px;
        }
        body a:hover{
            color: white!important;
            text-decoration: none;
        }
        */
        body a{
            color: #00AEEB!important;
            font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
            text-transform: uppercase;
            text-decoration: none;
            font-weight: bold;
        }
    
        .zen .zen-tabMenu a:hover {
            color: #0074c9!important;
            text-decoration: none;
            opacity: .7;
            transition: all .4s ease-in-out;
        }
        .zen .zen-tabMenu .zen-active>a {
            color: #0074c9!important;
        }
        span[style="font-size: 18px;"]{
            font-family: MetaBoldLF-Roman;
            font-weight: bold;
        }
        #sidebarCell{
            display: none;
        }
        .pageTitleIcon {
            display: none;
        }
        .pageType.noSecondHeader {
            margin-left: 0px!important;
            color: #00AEEB!important;
            font-family: Clarendon!important;
            font-weight: bold!important;
        }
        html .brandTertiaryBgr {
            background-color: transparent!important;
        }
        .message.infoM2 {
            background-color: transparent!important;
            border-style: none!important;
            padding-left: 0px!important;
            margin-left: 0px!important;
        }
        .infoM2 .msgIcon {
            display: none!important;
        }
        #userNavMenu{
            display: block!important;
            top: -30%;
            width: none;
            text-align: center;
            -webkit-box-shadow: 0px!important; 
            box-shadow: 0px!important; 
            padding: 0px!important; 
            background-color: #0074c9!important;
        }

         #userNavMenu:hover{
            opacity: .7;
            transition: all .4s ease-in-out;
        }

        .zen .menuButtonMenu{
            border-radius: 11px!important;
        }
        #userNavButton{
            display: none;
        }
        a[title="My Settings"]{
            display: none!important;
        }
        body .menuButton .menuButtonMenu a{
            text-decoration: none!important;
            font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif!important;
            color: #fff!important;
            font-weight: bold!important;
            text-transform: uppercase;
            font-size: 14px!important;
        }
        body .menuButton .menuButtonMenu a:hover{
            color: white!important;
        }
        .zen .zen-tabMenu>li{
            height: 37px;
            line-height: 37px;
            padding: 0px 11px 11px 10px !important;

        }
        .outer td.oRight {
        	padding: 0px !important;
        }
        iframe[title="Portal_Homepage"]{
        	height: 602px !important;
        }

        .noSidebarCell {
            padding: 0px!important;
        }

        #helpNavMenu a, #notificationsNavMenu a, #userNavMenu a {
            padding-right: 15px!important;
        }

        .zen .zen-mrl, .zen .zen-mhl, .zen .zen-mal {
            margin-right: 0px !important;
        }

	</style>

    <div class="bPageHeader custom-header" id="AppBodyHeader">
        <div class="zen">
            <div class="zen-headerTop zen-bgdThemed brandZeronaryBgr" id="appHeaderTop">
                <div class="zen-branding"><img src="/servlet/servlet.ImageServer?id=015g0000000fRKB&amp;oid=00Dg0000001qU9T" alt=""  id="phHeaderLogoImage" onload="javascript:scaleImage(this, 122, 300);" /></div>
                <div class="zen-navViaSearch" role="search">
                    &nbsp; &nbsp; &nbsp; &nbsp;
                <!--
                    <form  action="/_ui/search/ui/UnifiedSearchResults" id="phSearchForm" method="GET" name="sbsearch" onsubmit="if (window.ffInAlert) { return false; }" >
                        <input type="hidden" name="searchType" id="searchType" value="2" />
                        <div class="headerSearchContainer" id="phSearchContainer">
                            <div class="headerSearchLeftRoundedCorner">
                                <div class="searchBoxClearContainer"><input  autocomplete="off" id="phSearchInput" maxlength="100" name="str" placeholder="Search..." size="20" title="Search..." type="text" value="" /><a class="headerSearchClearButton" href="javascript: void(0);" id="phSearchClearButton" name="phSearchClearButton" style="visibility:hidden" title="Clear search terms"></a></div>
                                <div class="headerSearchRightRoundedCorner" id="searchButtonContainer"><input value="Search"  id="phSearchButton" type="button" /></div>
                            </div>
                        </div>
                    </form>
                -->
                </div>
                <!--<div id="social-media-icons">
                    <span>Follow Us</span>
                    <a href="https://twitter.com/BreakthroughCo" target="_blank">
                        <img id="twitter-icon" src="https://c.na2.content.force.com/servlet/servlet.ImageServer?id=01540000001DdNX&oid=00D0m000000CmVZ&lastMod=1412904943000" height="32" width="32">
                    </a>
                    <a href="https://www.facebook.com/BreakthroughCollaborative" target="_blank">
                        <img id="facebook-icon" src="https://c.na2.content.force.com/servlet/servlet.ImageServer?id=01540000001DdYw&oid=00D0m000000CmVZ&lastMod=1412904962000" height="32" width="32">
                    </a>
                    <a href="https://www.linkedin.com/groups?home=&gid=2725777&trk=anet_ug_hm" target="_blank">
                        <img id="linkedin-icon" src="https://c.na2.content.force.com/servlet/servlet.ImageServer?id=01540000001DdNV&oid=00D0m000000CmVZ&lastMod=1412904993000" height="32" width="32">
                    </a>
                    <a href="http://instagram.com/breakthroughcollaborative" target="_blank">
                        <img id="instagram-icon" src="https://c.na2.content.force.com/servlet/servlet.ImageServer?id=01540000001DdNU&oid=00D0m000000CmVZ&lastMod=1412905014000" height="32" width="32">
                    </a>
                    <a href="http://www.youtube.com/user/breakthrough2012" target="_blank">
                        <img id="youtube-icon" src="https://c.na2.content.force.com/servlet/servlet.ImageServer?id=01540000001DdNY&oid=00D0m000000CmVZ&lastMod=1412904979000" height="32" width="32">
                    </a>
                </div>-->
                <div id="settings-menu" role="navigation">
                    <nav>
                        <ul class="zen-navMenus">
                            <li class="zen-menu zen-hasSubmenu zen-mrl">
                                <div class="menuButton menuButtonRounded" id="userNav">
                                    <div class="menuButtonButton  brandPrimaryBgr brandPrimaryBrd2" id="userNavButton">My Account
                                        <span class="menuButtonLabel  brandPrimaryFgr" id="userNavLabel" tabindex="0"></span>
                                        <span class="brandMenuButtonArrow brandPrimaryFgrBrdTop"></span>
                                        <div class="userNav-buttonArrow mbrButtonArrow" id="userNav-arrow"></div>
                                        <div class="userNavButton-btm mbrButton-btm mbrButton-rc"></div>
                                    </div>
                                    <div class="menuButtonMenu" id="userNavMenu">
                                        <div class="userNavMenu-tr mbrMenu-tr mbrMenu-rc"></div>
                                        <div class="userNavMenu-tl mbrMenu-tl mbrMenu-rc"></div>
                                        <div class="mbrMenuItems" id="userNav-menuItems">
                                            <a href="javascript:sfdcPage.openPersonalSetup(%27/_ui/common/setup/PersonalSetup%27);" class="menuButtonMenuLink" title="My Settings">My Settings</a>
                                            <a href="/secur/logout.jsp?retUrl=https%3A%2F%2Fportal-breakthroughcollaborativeportal.na2.force.com%2FCommunitiesLanding" class="menuButtonMenuLink" title="Logout">Logout</a>
                                        </div>
                                        <div class="userNavMenu-br mbrMenu-br mbrMenu-rc"></div>
                                        <div class="userNavMenu-bc mbrMenu-bc"></div>
                                        <div class="userNavMenu-bl mbrMenu-bl mbrMenu-rc"></div>
                                    </div>
                                </div>
                                <script>new MenuButtonRounded('userNav', false,16);</script>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

 
Holly Havelka 10Holly Havelka 10
Hemant, so I utilized native Salesforce navigation.  Each page should be marked as showHeader="true".  The only thing I did was to modify and overide the CSS for the tab styling via the header html document I shared above.
Holly Havelka 10Holly Havelka 10
Hi all, I ended up using the below to get my requirement to work:
 
.wt-Application {
            display: {!IF(isDisplayed, 'initial', 'none!important')};
    }

 
This was selected as the best answer