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

XF 1.3 Public Navigation Tabs - TabLink functions

Discussion in 'Styling and Customization Questions' started by Neil E., Dec 30, 2014.

  1. Neil E.

    Neil E. Active Member

    Here is a section of a 1200px wide desktop view. Note that I have reordered the Public TabLinks. New Posts / Watched Threads / Watched Forums / Search Forums / Mark Forums Read. I want the New Posts link at the left side of the list. I also want it to stay at the left side of the list during any window resizing.
    section of 1200px wide.jpg

    All the related template code is stock except I set Responsive to switch from QuickSearch to Placeholder at “Wide” (800px). Here is a screen capture at 780px. Note that there is a lot of space between Mark Forums Read and the Placeholder (magnifying glass).
    780px wide.jpg


    As the window is reduced, the TabLinks are pushed into a menu format. This is shown by the “…”, but there is still lots of space before the Placeholder. Here is a screen capture at 749px. Note that New Posts is missing (becomes part of the "…" dropdown menu).
    749px wide.jpg


    It gets more interesting; with the window at 590px wide, suddenly the full list is back.
    590px wide.jpg


    The menu format is back at 509px and New Posts is gone again.
    509px wide.jpg


    Concerns:

    There is way too much space between the Placeholder and Mark Forums Read when the menu format is triggered. How can this be reduced?

    The menu format works in the wrong direction (left side of list collapses). I need New Posts to stay at the head of the list (left side). My users prefer New Posts to always be directly accessible. If the list collapsed from the right side that would be OK. Can the direction be changed?

    I would like to try this with no “menu format” taking place. This might be OK depending on what I choose for my minimum page width. I might consider requiring all mobile users with small devices to view the forum using landscape orientation. How can the menu action be turned off?
     
    Last edited: Dec 30, 2014
  2. Russ

    Russ Well-Known Member

    Extra.css....

    Code:
    @media (max-width:@maxResponsiveWideWidth) {
    .Responsive .withSearch .navTabs .navTab.selected .blockLinksList {
    margin-right: 50px !important;
    }
    }
    
    By default the value is 50px at the WideWidth(I think) so you just need to decrease it a little(enough space to leave room for the icon still), anything above the WideWidth is 275 to compensate for the full search box.
     
  3. Neil E.

    Neil E. Active Member

    Thanks, that helps with the spacing. If I could get the menu function to remove Mark Forums Read instead of New Posts, I'd be happy with how it works. Alternately, having the menu turned off and making the TabLinks "overflow: hidden" is something else I'd like to try.
     

Share This Page