CS Nuglet: Centering a variable item Navigation Menu by role

This is a pretty simplistic nuglet, but I went about my business for two days living with a non-centered navigation menu until this simple fix presented itself.  The issue is one most of us encounter: Anonymous users see 4 menu items in their Navigation List, Registered Users see 5.  This is usually not an issue unless we need to center it on the page.

CSS-wise we use an Outer Div at 100% width, then place the Navigation List in an Inner Div of a set width using auto margins.  The problem is specifying the width of the inner Div because we don’t have a set number of menu items.

The solution is adding the Inner Div based on role, like so.

 

<CSControl:ConditionalContent ID=”ConditionalContent1″ runat=”server”>
    <ContentConditions>
        <CSControl:UserPropertyValueComparison
            ID=”UserPropertyValueComparison1″ runat=”server”
            UseAccessingUser=”true” ComparisonProperty=”IsAnonymous”
            Operator=”IsSetOrTrue” />
    </ContentConditions>
    <TrueContentTemplate>
           <div class=”InnerAnonymous”>
    </TrueContentTemplate>
    <FalseContentTemplate>
            <div class=”InnerRegistered”>
    </FalseContentTemplate>
</CSControl:ConditionalContent>
<CSControl:NavigationList ID=”NavigationList1″ runat=”server” Level=”0″
    Theme=”drive” Property=”navigationItems”
    RenderChildrenInContextMenu=”false”>
    ….

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.