CSS Grid Bootstrap V4alpha Offcanvas...

User 244626 Photo


Registered User
811 posts

Here is a responsive navbar menu I created using Bootstrap V4alpha in CSS Grid Builder. It uses the new pseudo feature dynamic class named "open canvas" which allows one to design the "open" state for the navbar-collapse. A small script toggles the open state. I believe one could also use the pseudo dynamic class "target" to totally eliminate the script but I have not figured out how to do that yet. The next step is to integrate the navbar into a actual css grid project.
Bootstrap 5 CSS Grid.
User 2897807 Photo


Guest
4 posts

I tried to do this and target the pseudo dynamic class "target" but it screws up the layout. css grid doesnt work either.
User 244626 Photo


Registered User
811 posts

Yes you are correct, the pseudo dynamic target class suggestion I made is non-related to eliminating the toggle script. The Offcanvas Menu I created using Grid Builder is found at the bottom of the Bootstrap 4 website Example page. It is not created using the grid display rather flex. One can simply insert the menu component into a defined grid area, most likely a full row on the top of the defined grid.

This is the great thing about Grid Builder, you can design only parts of your page using grid layouts if you so choose.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Dipsy, I was successful in creating a Offcanvas Menu using the pseudo target class which eliminates the jquery toggle script. My apologies.
Attachments:
Bootstrap 5 CSS Grid.
User 2897807 Photo


Guest
4 posts

Twinstream wrote:
Dipsy, I was successful in creating a Offcanvas Menu using the pseudo target class which eliminates the jquery toggle script. My apologies.


Thanks for Sharing to add in my knowledge. In future if i need help about it, i will contact you.

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.