Breadcrumb navigation alignment & mobile adjustment

[emhog]

Hi

I have added breadcrumb navigation to my website, but can't seem to make it adjust with a margin on the left to align with the logo. It also needs to be flexible for mobile use. The options I've found with adjusting distance, seems to be fixed and doesn't adjust when the window is smaller. I've got the Dawn theme.

breadcrumbs.liquid looks like this:

<style>
.breadcrumbs {
margin: 0 0 2em;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
border-style: solid;
border-width: .10em .10em 0 0;
content: '';
display: inline-block;
height: .20em;
margin: 0 .20em;
position: relative;
transform: rotate(45deg);
vertical-align: middle;
width: .20em;
}

.breadcrumbs__link {
text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
@media screen and (max-width: 640px){
nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
margin-left: 5px;
margin-right: 5px;
margin-top: 30px;
font-size: 12px;
text-transform: uppercase;
}
}
</style>

[JosephK]

Hi,

To solved that issue, you can add to element which is wrapping breadcrumbs a class "page-width" as like this:

<div class="breadcrumbs page-width">
.....
.....
<div>

[emhog]

Thanks! do I add it to breadcrumbs.liquid, just anywhere? 

[JosephK]

yes, you need go to breadcrumbs.liquid file and add that class to inside div tag had class breadcrumbs already.

[emhog]

I've added it in but get an error message, any ideas?

Tried here also, with </div> but no change

Thank you 🙂

[suyash1]

@emhog - are you able to save it?

[JosephK]

Hi,

You must add that class in here:

<nav class="breadcrumbs page-width">

[emhog]

I've added it here, brings the breadcrumb a bit to the right, but doesn't align with logo when full window size, it does however respond to the size of the window when made smaller which is great.

[JosephK]

Could you share the store url here?

Like that will easy to check and give to you the suggestion.

[emhog]

Mys.co.Nz
P@ssw0rd

Thank you 😉

[JosephK]

Hi,

To solved this issue, you can do follow.

Admin -> Theme -> Customize Code -> assets -> base.css

Then add this code bellow to that file:

.breadcrumbs {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

[suyash1]

@emhog - can you please share the page link from where you got the screenshot?

[emhog]

Thank you! It looks better and better. It's still not inline with the logo in fullscreen, but maybe that is the closest it will get? Do you know how to add a layer to it; when you go Products>Collection>Item it only says Home>Item...

🙂

www.mys.co.nz