XF 1.3 Public Navigation Tabs - TabLink functions

[Neil E.]

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.


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).



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).



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



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



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?

 

[Russ]

Extra.css....

@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.

 

[Neil E.]

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.