Breadcrumb navigation alignment & mobile adjustment

Store Design
,
1

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.

emhog_0-1696628460628.png
emhog_0-1696628460628.png1065×390 14.2 KB

breadcrumbs.liquid looks like this:

.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; } }
2

Hi,

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


.....
.....
3

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

4

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

5

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

6

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

emhog_0-1696709380562.png
emhog_0-1696709380562.png582×202 8.93 KB

Tried here also, with but no change

emhog_1-1696710089378.png
emhog_1-1696710089378.png842×202 9.87 KB

Thank you :slightly_smiling_face:

7

@emhog - are you able to save it?

8

Hi,

You must add that class in here:


![JosephK_0-1696817567390.png|1806x558](upload://sZBvfrMF5CfJtj54UICrdcwDJqo.jpeg)
9

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.

emhog_0-1696820570135.png
emhog_0-1696820570135.png959×589 27.2 KB

emhog_1-1696820624225.png
emhog_1-1696820624225.png642×293 14.3 KB

emhog_2-1696820698594.png
emhog_2-1696820698594.png283×282 12.6 KB

10

Could you share the store url here?

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

11

Mys.co.Nz
[email removed]

Thank you :wink:

12

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%;
}
13

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…

:slightly_smiling_face:

www.mys.co.nz