1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Navigation Bar

Discussion in 'Styling and Customization Questions' started by psx, Jun 24, 2015.

  1. psx

    psx Active Member

    Screenshot 2015-06-24 at 5.05.59 AM.png

    The tabs of the navigation bar are low I want them higher

    Here is the code for navigation.css
    HTML:
    #navigation .pageContent
    {
       
        position: relative;
    }
    
    #navigation .menuIcon
    {
        position: relative;
        font-size:18px;
        width: .9em;
        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: 0.4em;*/
        top: {xen:calc 'round(-0.31 + 0.029 * @headerTabHeight, 1)'}em;
        left: 0;
        width: .9em;
        height: 0.125em;
        border-top: 0.375em double currentColor;
        border-bottom: 0.125em solid currentColor;
    }
    
        .navTabs
        {
            @property "navTabs";
            font-size: 13px;
            font-family: Syncopate, arial;
            padding: 0;
            margin-top: 29px;
            text-transform: uppercase;
            float: right;
            position: relative;
            @property "/navTabs";
           
            height: @headerTabHeight;
        }
       
            .navTabs .publicTabs
            {
                float: right; margin-right:35px;
            }
           
            .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-family: Syncopate, arial;
        display: block;
        float: left;
        vertical-align: text-bottom;
        text-align: center;
        outline: 0 none;
        @property "/navLink";
        <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>
    height:40px; line-height:75px
    }
    .SplitCtrl { margin-top:5px; }
    
        .navTabs .publicTabs .navLink
        {
            padding: 0 22px;
        }
       
        .navTabs .visitorTabs .navLink
        {
            padding: 0 15px;
        }
       
        .navTabs .navLink:hover
        {
            text-decoration: none;
        }
       
        /* ---------------------------------------- */
        /* unselected tab, popup closed */
    
        .navTabs .navTab.PopupClosed
        {
            position: relative;
        }
       
        .navTabs .navTab.PopupClosed .navLink
        {
            color: #fff;
        }
       
            .navTabs .navTab.PopupClosed:hover
            {
                background:none !important;
            }
           
                .navTabs .navTab.PopupClosed .navLink:hover
                {
                    background:none !important;
                }
           
        .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: #fff;
            background: url(@imagePath/custom/hover.png) top center no-repeat;
            @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
        { color:#000; padding-bottom:15px;
        }
       
       
        /* ---------------------------------------- */
        /* selected tab, popup open (account) */
       
        .navTabs .navTab.selected.PopupOpen .navLink
        {
            @property "popupControl";
            color: @primaryDark;
            background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            text-shadow: 1px 1px 2px white;
            @property "/popupControl";
        }
       
    /* ---------------------------------------- */
    /* Second Row */
    
    .navTabs .navTab.selected .tabLinks
    {
        @property "navTabSelected.background";
    
        @property "/navTabSelected.background";
       
        width: 100%;   
        padding: 0;
        border: none;
        overflow: hidden; zoom: 1;   
        position: absolute;
        left: 0px;   
        top: {xen:calc '@headerTabHeight - 6'}px;
       
        background-position: 0px -@headerTabHeight;
        *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
        {
                   float:right;
        }
    
        .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-size: 10px;
                color: #516d8d;
                padding: 1px 10px;
                display: block;
                @property "/navTabLink";
               
               
            }
           
            .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";
                    font-size: 10px;
                    color: #516d8d;
                    text-decoration: none;
                    border-radius: 5px;
                    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: #e03030;
        padding: 0 2px;
        border-radius: 2px;
        position: absolute;
        right: 2px;
        top: -12px;
        line-height: 16px;
        min-width: 12px;
        _width: 12px;
        text-align: center;
        text-shadow: none;
        white-space: nowrap;
        word-wrap: normal;
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
        height: 16px;
        @property "/alertBalloon";
    }
    
        .navTabs .navLink .itemCount .arrow
        {
            @property "alertBalloonArrow";
            border: 3px solid transparent;
            border-top-color: #e03030;
            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
    {
    }
    
        .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
        {
        }
    
    .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>
    
    .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
        background: url("styles/test/custom/hover.png") no-repeat scroll center top rgba(0, 0, 0, 0);
        color: #FFFFFF; text-shadow:none;
    }
    
    .Popup .PopupControl.PopupOpen a, .Popup.PopupContainerControl.PopupOpen a {
       
        color: #FFFFFF !important; text-shadow:none;
    }
     
  2. C.Stanley

    C.Stanley Active Member

    Did you try acp/appearance/style properties/Header and navigation? For adjustment?
     
  3. psx

    psx Active Member

    Yes it worked, but the logo is stopping me from clicking the "Home" button. It doesn't go down as much.
     

Share This Page