Breadcrumbs alignment not fixed

  • Resolved lucaspanjaard

    (@lucaspanjaard)


    7 years, 7 months ago

    Dear Madam/Sir,

    My website is displaying the breadcrumbs correctly, but it seems their position on the page is not fixed. I.e. when I increase or decrease the width of my browser, all text on the page moves accordingly but the breadcrumbs do not. The breadcrumbs do seem to be responsive, since on a small screen they are displayed vertically.

    I use the following code, 

    .breadcrumbs{
margin: 30px 0 0 10px;
position: relative;
float: center; }

    ensuring the breadcrumbs are displayed at the preferred height, e.g. https://rentindicator.com/city-rent-averages/portugal-rent-averages/lisbon-rent-averages/.

    I want the breadcrumbs to be aligned right above the title of the page (e.g. Lisbon Rent Averages). Moreover, I want it to be ‘fixed’, i.e. move in according with the width of the browser. How should I change the styling code, or is it a php issue?

    Best,

    Luca Spanjaard

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author John Havlik

    (@mtekk)

    If you want the breadcrumb trail to follow the indention styling of the rest of the site, you probably want to make the markup surrounding the breadcrumb trail look similar. There are two things you probably want to do:

    1. Change the code wrapping the call to bcn_display() such that it looks like: 
      <section>
<div typeof=”BreadcrumbList” vocab=”https://schema.org/” class=”breadcrumbs container”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
</section>
    2. Remove your margin and float styling for the .breadcrumbs CSS class. The margin setting breaks the container centering and float:center is not valid.
    • This reply was modified 7 years, 7 months ago by bdbrown.
    Thread Starter lucaspanjaard

    (@lucaspanjaard)

    Hi John,

    Thank you for your reply.
    I’ve got now the following in the header.php file of my template, 

    <?php if(function_exists('bcn_display') && !is_front_page()){ ?>
    <div typeof=”BreadcrumbList” vocab=”https://schema.org/” class=”breadcrumbs container”>
        <?php bcn_display(); ?>
    </div>
<?php } ?>

    and in the custom css,

    .breadcrumbs{
position: relative;
float: left; }

    However, now the crumbs are stuck to the side.
    What should I do differently?

    Best,

    Luca

    Plugin Author John Havlik

    (@mtekk)

    Hi Luca,

    Have you since fixed this? When I visit the linked page, I see the breadcrumb trail that fits with the rest of the content (centered on wide screens). From the code you posted, you forgot to wrap the <div> for the breadcrumb trail with <section> tags, however on the linked site this appears to be fixed.

    -John Havlik

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Breadcrumbs alignment not fixed’ is closed to new replies.

Tags