halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.05k stars 115 forks source link

Responsive navbar-nav ? #18

Closed LeadGuitarMx closed 4 years ago

LeadGuitarMx commented 4 years ago

I'm loving Halfmoon so much!

Congratulations! You are doing an amazing job with it ; )

I'm trying to do a page layout for my website using only Halfmoon : )

But I see that you're using "navbar-nav" and "navbar-content" for making looks the Navigation menu like responsive. The problem is that my website have several links on the menu and make them duplicate doesn't looks like a good idea for me 🤔.

There isn't a way of making the same effect? a responsive Navbar-nav without duplicating all the links?

Thank you so much for your answer and the great work! Cheers!!

halfmoonui commented 4 years ago

The duplication is necessary for navbars to be responsive in Halfmoon. This was in fact a design decision because of the following pros:

The con is obviously the duplication of markup as you mentioned. However, I feel that this is a fair trade-off. And thank you for all the kind words!

LeadGuitarMx commented 4 years ago

Hello, thanks for responding. : ) Duplicate many links isn't a good option for me, so I did it responsive for my site using only a bit of css :D https://jsfiddle.net/LeadGuitarMx/5wmL0dpe/

I did it quickly, I think it can be better, but I don't know maybe it can give you an idea of implementing something for make it responsive and like that no cons ; )

I'm loving the simplicity and all what we can do with Halfmoon, so I'll try to do all what I can using only your script : )

1 more thing I noticed:

When I load my template on a smartphone I can see the sidebar appearing and disappearing. You can see It on the documentation page too: https://www.gethalfmoon.com/docs/introduction/

Is there any way to avoid it?

One more thing I want to ask : D It can be possible to use the Modals for calling a page on iframe?, or a youtube video? Or maybe using ajax for opening it on a modal?

Something like Magnific popup does? https://dimsemenov.com/plugins/magnific-popup/

It can be very cool :D

Thanks again : ) have a good one, cheers

halfmoonui commented 4 years ago

When I load my template on a smartphone I can see the sidebar appearing and disappearing. Is there any way to avoid it?

Unfortunately at this moment, there isn't a way to solve this. Its a pretty complex issue thanks to the different types of sidebars available. Maybe in the future.

It can be possible to use the Modals for calling a page on iframe?, or a youtube video? Or maybe using ajax for opening it on a modal?

The iFrame and Youtube video should be possible quite easily. I would look into the utilities to set the display, padding and border properties of the modal content and then put the iFrame/video inside it. If you get stuck, I recommend asking a question on Stack Overflow with this tag: https://stackoverflow.com/questions/tagged/halfmoon The ajax thing is not available within the scope of the framework, but again, should be fairly simple to implement from what I can understand, especially if you are using a templating library in your project, or any of the big JS frameworks (Vue, React, Angular, Svelte).

Also, thanks again for the nice words. I will close this issue since you have solved your original issue.