Navigation Menu on Microsoft Edge -...

User 244626 Photo


Registered User
811 posts

The added breakpoint at 945 is in conflict with the list containor the has the class large-horizontal.

I have provided a example of the change. Your file is to big to upload so I deleted all the resources.

I deleted break-point 945. I removed the class large-horizontal for the list container (has menu class on it also for reference). I slid the slider above the 1024 blue break-point and changed the same list container layout from flex "column" to "row".

There may be other issues with the discussion of doing Grid in fallback mode however in your case your main Grid layout just consists of rows. There may be other places (page section layouts) you are using it so its hard to say.

There are some other smaller issues but you are on the right track.

Attachments:
Bootstrap 5 CSS Grid.
User 2624719 Photo


Registered User
283 posts
Online Now

Hi Angie
I ve been playing with your file in ie11 and this is what it looks like not sure if this is what you want

Regards Adrian
Attachments:
User 244626 Photo


Registered User
811 posts

Angie, here is a revised version with quite a few changes...
Attachments:
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,647 posts
Online Now

They are both very good, Twinstream and Adrian!

Initially I started looking into this, but other commitments have kept me busy for a couple of days.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2601283 Photo


Registered User
219 posts

Thank you all so much, YOU ARE AMAZING!
User 2601283 Photo


Registered User
219 posts

Bob Visser wrote:
Angie Mulligan wrote:
This is where I’m confused. I did fall back first and hadn’t changed anything for grid


If you're done with Fallback First you have to toggle the support query before applying display: grid. In your project the container that you call .grid-parent uses display grid for a fallback first scenario.

So I should change the .grid-parent to display flex for Fall Back, and then toggle to display grid on @support?
User 244626 Photo


Registered User
811 posts

Yes, if you plan on using Grid thats the way I would do it on your project. I would perform this on a test project first but it appears to me you will be ok if you change the .grid-parent and one other sub container that is set using grid. You can then add the default display:grid @supports. Once you have the available display toggle you should remember to do all design styling and Flex arrangement in Fallback and only Grid arrangements in display:grid. If you set a style like font size in display:grid you will also have to remember to set a font size in fallback. So set your styles in fallback first and they will already be set for grid.
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.