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

XF 1.2 Help with responsive breadcrumb issue

Andy.N

Well-known member
#1
Here is a page that has 2 simple top and bottom navigation breadcrumbs. When you resize the windows to make it smaller, it appears the "breadcrumb" has a longer width than the pageWidth setting.

There must be something in the navigation.css or breadcrumb.css that I need to adjust. The style is Flexile and the author seems to abandon it so hope to get help from the community
. Screen Shot 2013-09-14 at 11.08.07 PM.png
 

Steve F

Well-known member
#4
Code:
/* Responsive Settings */
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
        .breadBoxTop, .breadBoxBottom
        {
                margin: 0 -10px !important;
        }
}
</xen:if>
That seems to fix it, add it to EXTRA.css. Previously it was margin: 0 -20px;
 

Andy.N

Well-known member
#6
Code:
/* Responsive Settings */
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
        .breadBoxTop, .breadBoxBottom
        {
                margin: 0 -10px !important;
        }
}
</xen:if>
That seems to fix it, add it to EXTRA.css. Previously it was margin: 0 -20px;
Steve,
Thanks again, just discovered that having that fix will help on the XF page, but not on thread view. For example, if you look at this url and resize your window, the top breadcrumb is short of 10px while the bottom breadcrumb is 10px too long or something.
https://www.quantnet.com/threads/students-intro-thread.7522/