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

Discussion in 'Styling and Customization Questions' started by Andy.N, Sep 15, 2013.

  1. Andy.N

    Andy.N Well-Known Member

    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
  2. RoldanLT

    RoldanLT Well-Known Member

    The url?
    Use % as width, like 100%
  3. Russ

    Russ Well-Known Member

    Some breadcrumbs have a negative margin to get it in the right spot, you may just need to adjust the margin to like 0 on responsive
    Andy.N and Steve F like this.
  4. Steve F

    Steve F Well-Known Member

    /* Responsive Settings */
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
            .breadBoxTop, .breadBoxBottom
                    margin: 0 -10px !important;
    That seems to fix it, add it to EXTRA.css. Previously it was margin: 0 -20px;
    Andy.N likes this.
  5. Andy.N

    Andy.N Well-Known Member

    Thank you guys. Glad to be able to get this off my to-fix list.
  6. Andy.N

    Andy.N Well-Known Member

    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.

Share This Page