Xenforo navigation bar

Discussion in 'Systems Administration' started by SnooWiK, Apr 6, 2016.

Thread Status:
Not open for further replies.
  1. [​IMG]
    How to create? In navigation bar.
    MY navigation.css:
    Code (Text):
    #navigation .pageContent
    {
        height: {xen:calc '@headerTabHeight * 2 + 2'}px;
        position: relative;
    }

    #navigation .menuIcon
    {
        position: relative;
        font-size:18px;
        width: 16px;
        display: inline-block;
        text-indent: -9999px;
    }

    #navigation .PopupOpen .menuIcon:before,
    #navigation .navLink .menuIcon:before
    {
        zoom: 1;
    }

    #navigation .menuIcon:before
    {
        content: "";
        font-size: 18px;
        position: absolute;
        top: {xen:calc 'round(-0.31 + 0.029 * @headerTabHeight, 1)'}em;
        left: 0;
        width: 16px;
        height: 2px;
        border-top: 6px double currentColor;
        border-bottom: 2px solid currentColor;
    }

        .navTabs
        {
            @property "navTabs";
            font-size: 14px;
            background-color: @uix_secondaryColor;
            border-color: @uix_primaryBorder.border-color;
            border-radius: @uix_globalLargeBorderRadius;
            box-sizing: border-box;
            background-clip: content-box;
            @property "/navTabs";
           
            height: @headerTabHeight;
        }
       
            .navTabs .publicTabs
            {
                float: left;
            }
           
            .navTabs .visitorTabs
            {
                float: right;
            }
       
                .navTabs .navTab
                {
                    float: left;
                    white-space: nowrap;
                    word-wrap: normal;
                   
                    <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
                }


    /* ---------------------------------------- */
    /* Links Inside Tabs */

    .navTabs .navLink,
    .navTabs .SplitCtrl
    {
        @property "navLink";
        font-weight: bold;
        color: rgba(255, 255, 255, 0.75);
        padding-right: 12px;
        padding-left: 12px;
        display: block;
        float: left;
        vertical-align: text-bottom;
        text-align: center;
        outline: 0 none;
        text-transform: uppercase;
        @property "/navLink";
       
        <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>
       
        height: @headerTabHeight;
        line-height: @headerTabHeight;
    }

        .navTabs .publicTabs .navLink
        {
            padding: 0 15px;
        }
       
        .navTabs .visitorTabs .navLink
        {
            padding: 0 10px;
        }
       
        .navTabs .navLink:hover
        {
            text-decoration: none;
        }
       
        /* ---------------------------------------- */
        /* unselected tab, popup closed */

        .navTabs .navTab.PopupClosed
        {
            position: relative;
        }
       
        .navTabs .navTab.PopupClosed .navLink
        {
            color: @primaryLighter;
        }
       
            .navTabs .navTab.PopupClosed:hover
            {
                background-color: @primaryMedium;
            }
           
                .navTabs .navTab.PopupClosed .navLink:hover
                {
                    color: @textCtrlBackground;
                }
           
        .navTabs .navTab.PopupClosed .arrowWidget
        {
            /* circle-arrow-down-light */
            background-position: -64px 0;
        }
       
        .navTabs .navTab.PopupClosed .SplitCtrl
        {
            margin-left: -14px;
            width: 14px;
        }
           
            .navTabs .navTab.PopupClosed:hover .SplitCtrl
            {
                /* nav_menu_gadget, height: 17px */
                background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -128px {xen:calc '(@headerTabHeight - 17) / 2 + 1'}px;
            }
       
        /* ---------------------------------------- */
        /* selected tab */

        .navTabs .navTab.selected .navLink
        {
            position: relative;
            @property "navTabSelected";
            color: @uix_primaryColor;
            background-color: @primaryLighterStill;
            border: 1px solid @navTabs.border-color;
            box-sizing: border-box;
            @property "/navTabSelected";
        }
       
        .navTabs .navTab.selected .SplitCtrl
        {
            display: none;
        }
       
        .navTabs .navTab.selected .arrowWidget
        {
            /* circle-arrow-down */
            background-position: -32px 0;
        }
       
            .navTabs .navTab.selected.PopupOpen .arrowWidget
            {
                /* circle-arrow-up */
                background-position: -16px 0;
            }
       
        /* ---------------------------------------- */
        /* unselected tab, popup open */
       
        .navTabs .navTab.PopupOpen .navLink
        {
        }
       
       
        /* ---------------------------------------- */
        /* selected tab, popup open (account) */
       
        .navTabs .navTab.selected.PopupOpen .navLink
        {
            @property "popupControl";
            color: #FFF;
            background-color: @uix_primaryColor;
            background-repeat: repeat-x;
            background-position: top;
            border-top-left-radius: @uix_globalBorderRadius;
            border-top-right-radius: @uix_globalBorderRadius;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            @property "/popupControl";
        }
       
    /* ---------------------------------------- */
    /* Second Row */

    .navTabs .navTab.selected .tabLinks
    {
        @property "navTabSelected.background";
        background-color: @primaryLighterStill;
        @property "/navTabSelected.background";
       
        width: 100%;  
        padding: 0;
        border: none;
        overflow: hidden; zoom: 1;  
        position: absolute;
        left: 0px;  
        top: {xen:calc '@headerTabHeight + 2'}px;
        height: @headerTabHeight;
        background-position: 0px [email protected];
        *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
    }

        .navTabs .navTab.selected .blockLinksList
        {
            background: none;
            padding: 0;
            border: none;
            margin-left: 8px;
        }

        .withSearch .navTabs .navTab.selected .blockLinksList
        {
            margin-right: 275px;
        }

        .navTabs .navTab.selected .tabLinks .menuHeader
        {
            display: none;
        }
       
        .navTabs .navTab.selected .tabLinks li
        {
            float: left;
            padding: 2px 0;
        }
       
            .navTabs .navTab.selected .tabLinks a
            {
                @property "navTabLink";
                font-weight: bold;
                font-size: @uix_globalSmallFontSize;
                color: @primaryMedium;
                padding-right: @uix_gutterWidthSmall;
                padding-left: @uix_gutterWidthSmall;
                border-style: none;
                display: block;
                @property "/navTabLink";
               
                line-height: {xen:calc '@headerTabHeight - 6'}px;
            }
           
            .navTabs .navTab.selected .tabLinks .PopupOpen a
            {
                color: inherit;
                text-shadow: none;
            }
           
                .navTabs .navTab.selected .tabLinks a:hover,
                .navTabs .navTab.selected .tabLinks a:focus
                {
                    @property "navTabLinkHover";
                    color: @uix_primaryColor;
                    text-decoration: none;
                    background-color: transparent;
                    outline: 0;
                    @property "/navTabLinkHover";
                }
               
                .navTabs .navTab.selected .tabLinks .Popup a:hover,
                .navTabs .navTab.selected .tabLinks .Popup a:focus
                {
                    color: inherit;
                    background: none;
                    border-color: transparent;
                    border-radius: 0;
                    text-shadow: none;
                }
       
    /* ---------------------------------------- */
    /* Alert Balloons */
       
    .navTabs .navLink .itemCount
    {
        @property "alertBalloon";
        font-weight: bold;
        font-size: 9px;
        color: white;
        background-color: #e74c3c;
        padding: 0 2px;
        border-radius: 2px;
        position: absolute;
        right: 2px;
        top: -12px;
        line-height: 16px;
        min-width: 16px;
        _width: 16px;
        text-align: center;
        text-shadow: none;
        white-space: nowrap;
        word-wrap: normal;

        box-sizing: border-box;
        height: 16px;
        @property "/alertBalloon";
    }

        .navTabs .navLink .itemCount .arrow
        {
            @property "alertBalloonArrow";
            border: 3px solid transparent;
            border-top-color: @alertBalloon.background-color;
            border-bottom: 1px none black;
            position: absolute;
            bottom: -3px;
            right: 4px;
            line-height: 0px;
            text-shadow: none;
            _display: none;
    /* Hide from IE6 */
    width: 0px;
            height: 0px;
            @property "/alertBalloonArrow";
        }
       
    .navTabs .navLink .itemCount.Zero
    {
        display: none;
    }

    .navTabs .navLink .itemCount.ResponsiveOnly
    {
        display: none !important;
    }

    .NoResponsive #VisitorExtraMenu_Counter,
    .NoResponsive #VisitorExtraMenu_ConversationsCounter,
    .NoResponsive #VisitorExtraMenu_AlertsCounter
    {
        display: none !important;
    }
       
    /* ---------------------------------------- */
    /* Account Popup Menu */

    .navTabs .navTab.account .navLink
    {
        font-weight: bold;
    }

        .navTabs .navTab.account .navLink .accountUsername
        {
            display: block;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    #AccountMenu
    {
        width: 274px;
    }

    #AccountMenu .menuHeader
    {
        position: relative;
    }

        #AccountMenu .menuHeader .avatar
        {
            float: left;
            margin-right: 10px;
        }

        #AccountMenu .menuHeader .visibilityForm
        {
            margin-top: 10px;
            color: @primaryMedium;
        }
       
        #AccountMenu .menuHeader .links .fl
        {
            position: absolute;
            bottom: 10px;
            left: {xen:calc '10 + 10 + 96'}px;
        }

        #AccountMenu .menuHeader .links .fr
        {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
       
    #AccountMenu .menuColumns
    {
        overflow: hidden; zoom: 1;
        padding: 2px;
    }

        #AccountMenu .menuColumns ul
        {
            float: left;
            padding: 0;
            max-height: none;
            overflow: hidden;
        }

            #AccountMenu .menuColumns a,
            #AccountMenu .menuColumns label
            {
                width: 115px;
            }

    #AccountMenu .statusPoster textarea
    {
        width: 245px;
        margin: 0;
        resize: vertical;
        overflow: hidden;
    }

    #AccountMenu .statusPoster .submitUnit
    {
        margin-top: 5px;
        text-align: right;
    }

        #AccountMenu .statusPoster .submitUnit .statusEditorCounter
        {
            float: left;
            line-height: 23px;
            height: 23px;
        }
       
    /* ---------------------------------------- */
    /* Inbox, Alerts Popups */

    .navPopup
    {
        width: 260px;
    }

    .navPopup a:hover,
    .navPopup .listItemText a:hover
    {
        background: none;
        text-decoration: underline;
    }

        .navPopup .menuHeader .InProgress
        {
            float: right;
            display: block;
            width: 20px;
            height: 20px;
        }

    .navPopup .listPlaceholder
    {
        max-height: 350px;
        overflow: auto;
    }

        .navPopup .listPlaceholder ol.secondaryContent
        {
            padding: 0 10px;
        }

            .navPopup .listPlaceholder ol.secondaryContent.Unread
            {
                background-color: @inlineModChecked.background-color;
            }

    .navPopup .listItem
    {
        overflow: hidden; zoom: 1;
        padding: 5px 0;
        border-bottom: 1px solid @primaryLighterStill;
    }

    .navPopup .listItem:last-child
    {
        border-bottom: none;
    }

    .navPopup .PopupItemLinkActive:hover
    {
        margin: 0 -8px;
        padding: 5px 8px;
        border-radius: 5px;
        background-color: @primaryLighterStill;
        cursor: pointer;
    }

    .navPopup .avatar
    {
        float: left;
    }

        .navPopup .avatar img
        {
            width: 32px;
            height: 32px;
        }

    .navPopup .listItemText
    {
        margin-left: 37px;
    }

        .navPopup .listItemText .muted
        {
            font-size: 9px;
        }

        .navPopup .unread .listItemText .title,
        .navPopup .listItemText .subject
        {
            font-weight: bold;
        }

    .navPopup .sectionFooter .floatLink
    {
        float: right;
    }

    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .Responsive .navTabs
        {
            padding-left: 10px;
            padding-right: 10px;
        }

        .Responsive .withSearch .navTabs .navTab.selected .blockLinksList
        {
            margin-right: 50px;
        }
    }

    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive.hasJs .navTabs:not(.showAll) .publicTabs .navTab:not(.selected):not(.navigationHiddenTabs)
        {
            display: none;
        }
    }
    </xen:if>

    THX
     
  2. mathhulk

    mathhulk Retired Moderator
    Retired

    Make a navigation bar like the picture requires more than just CSS...
     
  3. And, how to create?
     
  4. mathhulk

    mathhulk Retired Moderator
    Retired

    • Like Like x 1
    • Funny Funny x 1
  5. On top page,,,,
     
  6. You need someone who knows how to custom code CSS and HTML - someone with experience with XF.
    Ive done things like this before: my Skype - IncentDesigns
     
    • Funny Funny x 1
Thread Status:
Not open for further replies.