I have no idea how to make this - Breadcrumbs

HTML & CSS
1

Hi guys.

Well another one issue, I will provide screenshot and explain where is problem.

2866×1685 129 KB

So those breadcrumbs on left side.I have no idea how to make this, the problem is that, they have to be with position fixed too.The main tag has the relative position, I’m not sure is better to put breadcrumbs inside it or outside.This would be showed only on desktops, so no worries about small devices.

I don’t require from you to write me final code, I just need some guides.

btw, if it helps, I’m using foundation framework, just grid - build semantically.

Thank you.

2

If the breadcrumb is fixed, it’s out of the flow, so you will need to give the main container a border-left equal to its with to clear it. Using em units will avoid problems with font zooming.

1 Like
3

Hi Sam.

The Filter is also part of the breadcrumbs.Basically , there could be max 2 breadcrumbs.

4

Then the margin will need to equal their combined width.

1 Like
5

So, this markup, outside the <main> could be okay ?

<div class="breadcrumbs-wrap">
    <div class="breadcrumb">
        <a href="#">Hello, I'm first</a>
    </div>
    <div class="breadcrumb">
        <a href="#">But I'm second</a>
    </div>
</div>
6

Yes, that followed by the main should work.

1 Like
7

Thanks

This is until where I have some idea, after applying transforms, it become pretty messy.

8

This is a little tricky actually and I would do it like this.

You will need to give the vertical bars a fixed dimension and not percentage as that’s too messy. The content can then be offset by the same amount with a margin-left.

The main trick in the above demo is that you give the fixed sidebars a width equal to the viewport height (vh unit) which means that when you rotate them they will fit the height of the viewport exactly.

Also avoid giving heights to your content section as that will break at some point.

2 Likes
9

Paul you are real CSS Pro, thank you :smiley:

10

You’re welcome :slight_smile:

Make sure you test it out with real content to make sure it will stand up ok but it looks pretty sound for modern browsers…

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.