Good night guys, I acquired BS these days. I'm trying to create a header with social media and navigation just like on this site. Including the fixed menu.
https://livedemo00.template-help.com/intense/v2/home-blog.html
Can someone help me?
Well its not done in Bootstrap so the fish might not bite tonight and its also not very compatible.
"You are using an unsupported web browser. The supported browsers are Edge 12 or higher, Firefox 54 or higher, Safari 10 or higher, Google Chrome 51 or higher."
Got code ?
If you were asking about how to do a stacked menu you could use this plugin:
https://github.com/maximzhurkin/jquery-stack-menu
Example:
https://stacked.bss.design/
Okay, here's the thing, and I really think this needs to become a sticky notice at the top of this forum section...
The Help and How To section of the Bootstrap Studio forum is not for people to ask for help with building websites, writing custom CSS, or copying other websites.
It's for help with how to use the Bootstrap Studio program. How to find things within the visual tools. How to adjust settings. How to use the components, the options panel, even the animations features. In other words, how to use the features and options that are PART of the program. Something like this website you've posted is totally custom. The stock Bootstrap navbar (which is all that you get with BSS) does nothing like this website you've posted. You'd need to create almost all this CSS yourself. This is front-end web development... user experience... in a nutshell.
We are not web development instructors (well maybe some of us are, but I presume we get paid for it.) I think most of us here are in the business of building websites for a living. So while I'm happy to offer the occasional tip to someone who's made an error in their CSS, or needs help sorting out a markup error, or tweaking some javascript, etc... I know that I personally am not going to spend hours (and it would take me hours) to study a website template someone found online, and then teach that stranger how to go about dissecting it, and recreating it in Bootstrap Studio. That navigation menu is not especially complicated if you understand how to use CSS transitions, translations, scaling, pseudo classes, and the calc function. But if you don't, you're talking about a full blown exposition that would take hours, if not days, to teach to a novice. And it's miles away from what this program can do with it's built-in Bootstrap nav components.
Now, if you understand how the things I mentioned above work, it's a simple matter of opening their sample site in a browser (or a program like Pinegrow) and using the inspect tool to look at how they're achieving all the various effects. You could just copy down their CSS file and sift through it for the relevant classes. Me personally, I'd probably just look at what's going on closely, and then write my own CSS from scratch. But it would still take me a few hours to get it all looking and working exactly the same, with the mega menus, the hover effects, and the second level of drop-down menus. And to be perfectly honest, I find the site kind of jarring/distracting and not a particularly friendly UX.
But if you really like it, $75 is not an unreasonable price for everything they're giving you. If I was going to build something like this for someone from scratch, I'd charge considerably more than $75.
But however you slice it, if you do buy it, it's NOT going to work with Bootstrap Studio's visual tools. You have to import it as custom code, and separate CSS, and that could save you some time.
I"m tempted to ask Twinstream what browser, even what device, he was using to view the original post
Just scanning it on my way home on the bus - using a cheapo android phone -- not the latest, most poweful device, I had no trouble viewing it. The sort of response he quotes I usually only see when trying to view sites on older phones/ browsers -- Firefox is now up to 79, Chrome up to 84, so I'd question "also not very compatible". Other than that, seems relatively straightforward to do what Printninja suggests, and as he says, not usually a part of "BSS", BSS referring to the program, and not the BS framework, however much some people conflate the two.
@TeschToy
Its up to each developer to decide what browsers they are going to "pitch" to support but currently Bootstrap 4 supports IE11 so that is the browser that you will see the error message come up if you view it in IE11. Nice job by the dev for a least the notification. The menu does not work on some older versions of Chrome (later than 51) and Opera but thats more of a font-icon issue as it completely disappears. Not trying to pick apart the template/builder program as its got some really advanced stuff going on....React??
@kuligaposten
Nice touch on the light/dark mode on the Mega menu. Did not see that when I downloaded that component the other day. Super helpful too !
thank you Twinstream
I added a sidebar without animation for small devices
It's interesting -- but of no practical value, perhaps, at least in terms of those using BSS as a learning tool, that I've come back to this "this morning" after reading Firefox Browser Use Drops As Mozilla's Worst Microsoft Edge Fears Come True. If one is interested in "testing" browser compatibility then should one still use for the purpose something that's still being used by only 6% of the total user base (and perhaps of much smaller percentage still of the user base of those using BSS) -- would this still be of interest to the "user base" of people using BSS as a learning tool ("awareness" frequently being at odds with "user satisfaction" ["awareness" frequently being at odds with "user satisfaction"]
But then again, this is likely hardly the best place for this discussion, and we should leave it to go there, before some people, justifiably very angrily, demand it do so.
@kuligaposten
That's a nice approximation of what the OP posted, although it's missing the 2nd level sub-menus and the fancy, left-to-right transition effects when you hover over the links. It's all CSS, nothing too complex, but you DO need to know your way around CSS.
Personally, I still find the "swooping in" motion of the mega-menu a bit... IDK... jarring from a UX perspective. I feel effects like that are sort of gratuitous. If they're not aiding the visitor in what they came to the website for, they're at best superfluous, and at worst distracting and off-putting. I believe K.I.S.S. is the best policy for UI design. If fancy effects help to more effectively convey information, orient the visitor, and make their visit more pleasing, then keep them. If not, they're just chaff among the wheat.
@kuligaposten
I also like the sidebar. The fade could be a bit faster, but all-in-all very nicely done!
You could do a slinky on his sidebar...
https://slinkysidebar.bss.design/
@Twinstream
You are quite good with Javascript. I still have much to learn.
Thank you Printninja,
I added a second level on some of the links and a small background-color effect when you hover over the links in the mega menu. Not that fancy as Intense template, but there is an effect. The animation is a little bit less now. In the sidebar there is a switch West/East Left to Rigth or Right to Left but there is still some work to be done for Right to Left layout
Twinstream I will look into the slinky for the sidebar
@kuliganposten
I commend you for providing this gratis. It had to have taken you some time to create. Have you shared it as an online component?
@Printninja
I did not write the javascript for the slinky. The plugin can be found here....
https://github.com/alizahid/slinky
Its a interesting form of menu that the OP refers to and I was just giving a suggestion on how that is achieved "out in the wild". It has some issues the way I added it like some transitions competing against themselves.
My javascript skills are getting better but not yet in any league that requires one to just sit and type it all day.