XF 1.5 Spreading the Nav Tabs using Flex

*******UPDATE*******
If I only use:
ul.publicTabs.navLeft {
display: flex !important;
justify-content: space-between !important;
}
Then uncheck "float: left" from ".navTabs .navLeft" in the inspector console, I get the correctly laid out nav bar (middle image above)

It looks like it is the float option that is the problem.
*******UPDATE*******

Hey there peoples.

New to Xenforo (owned 1 year, used only in the last week).

I have tried to get the navTabs to spread evenly using Flex as follows:

This is what my nav bar looks like pre-modification:

Screen Shot 2017-04-09 at 1.11.38 AM.webp

So I change the css in the inspector console as so:

ul.publicTabs.navLeft {
display: flex !important;
justify-content: space-between !important;
}

.navTabs .navLeft {
/* float: left; */
}

And produced the following:

Screen Shot 2017-04-09 at 1.12.02 AM.webp

Looks nice huh!

So then I try to add this to the EXTRA.css as:

ul.publicTabs.navLeft {
display: flex !important;
justify-content: space-between !important;
}

.navTabs .navLeft {
float: none;
}

But I end up getting the following:

Screen Shot 2017-04-09 at 1.13.39 AM.webp

Does anyone have any idea on what is going on?

I assume that <ul.publicTabs.navLeft> OR <.navTabs .navLeft> is somehow triggering a menu bar collapse.

Any help would be GREATLY appreciated!

Thank you!
 
Last edited:
Okay, I have found that by commenting out this line from the navigation TEMPLATE, the menu items will no longer collapse:

<xen:if is="@uix_rightCanvasTrigger_position == 0"><xen:include template="uix_offCanvasTrigger"><xen:set var="$canvasLocation" value="1" /></xen:include></xen:if>

BUT, then the visitor details no longer move from the user bar above, to the Navigation bar below, when you resize to smaller than 800px. They just disappear altogether.

Any thoughts peoples?
 
As we aren't familiar with the template HTML and CSS from that style, posting in the resource thread or contacting the author of the style would be the best way to obtain support with it.
 
Back
Top Bottom