Top bar and footer are full width and not contained

Hey,
Your site requires login info in order for me to view it. Can you send that? Or else temporarily remove maintenance mode?
Thanks!

Hannah

sorry i put the details in the link:

user test
password testme
thanks

I’m seeing your header and footer content inline with your page content. Are you wanting a boxed layout? You could select that from Theme Options > Main Settings.
This css will make your social icons larger:

.virtue_social_widget a i {
    font-size: 24px;
}

Just paste that into your custom css box in Theme Options > Advanced Settings.
Hope it helps!

Hannah

Hi Hannah
Great thanks so much on the width issue. On a related issue I have set a background image as per your demo site using the Virtue demo site custom CSS and added a NAvXT breadcrumb in a child theme header.php but the breadcrumb appears on the background image rather than in the main body (open any page below home page). Any ideas how to fix please?

/**
add Breadcrumb NavXT except on home page
*/
if(function_exists('bcn_display') && !is_front_page()){ ?>
<section>
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
        <?php bcn_display(); ?>
    </div> 
</section>
<?php } ?>

And this in the header via ‘custom CSS and JS’ plugin:

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

NB this is the CSS I used for icons:

[class^=icon-]  {
      font-size: 30px;
      padding-right: 20px;
 }
#containerfooter .menu li a {
  max-width: 250px;
}
.virtue_social_widget a i {
  font-size: 30px
}
#topbar-search input[type=text] {
  height: 50px;
}
.form-search .search-query {
  padding-left: 50px;
}

You can use css like this to pull it down:

.breadcrumbs {
    margin-bottom: -50px;
    padding-bottom: 12px;
}

Hope that helps!

Hannah

Hi Hannah
Almost there – unfortunately I can’t click on the breadcrumb paths.
https://www.hardylabels.com/product-category/bespoke-garden-labels/

Thanks

Hmm, looks like the page header is covering it. Try adding this css:

.page-header {
    margin-top: 30px;
}

Does that fix this?

Hannah

Hi Hannah
Thanks again but I suddenly realise that the ‘margin-bottom: -50px;’ has how hidden the yellow header banner (with the search and cart button). Any ideas why this is happening?
Thanks

Sorry, replace this css:

.breadcrumbs {
    margin-bottom: -50px;
    padding-bottom: 12px;
}

with this:

.breadcrumbs {
    margin-bottom: -50px;
    padding-bottom: 12px;
    padding-top: 50px;
}

Hannah