How to add bootstrap codes to custom html module

[Farid]

I wrote html codes with bootstrap effect in a custom html module (specialy a tab menu ) and added it to my paid template. So to activate this effect I need to add bootstrap link and script to head of html module. I just wrote them to html custom module inside a head tag before body tag. So when I set preview to check the menu effect it works good for me, but when I send the preview link to others or copy paste the link to my browser the menu dosen't have a correct effect, it jumps up or down only.

Could anyone help me please in this case?

[Ty]

Hi @Farid,

I'd love to take a look for you, do you have a link to the preview version that you could provide me?

Thanks!

-- Ty

[Farid]

Hi Ty

Here is the Link:

http://www.klara.ch/angebot?hs_preview=cGHyyZLl-5115750260

Thanks

Farid

[Ty]

Hi @Farid,

Thanks for providing a link! I took a look at your templates and noticed two things that could possibly be doing this.

The first is, it looks like you have an extra closing </div> in your html that makes up your tabber. If you go into that file and remove the last occurrence of </div>, that should fix your issue there. The next is a weird one, you have a script that is essentially blocking your other two scripts from running. That script is the "ACT-main-js".

What I would suggest is: Taking that script (link to direct JS file, not the append function) and including that in your site's header, so it automatically loads across your all your pages, and then remove it from individual templates. When I tested, by commenting that script out, your bootstrap tabbers were working as expected. However when it's included on that template level, it's causing your scripts to not run. Without studying the JS file. I believe it is because they have some form of prevent default set on their links, which is now being caught on your page.

If you for some reason can't remove this script, let me know and we can try to spin up a solution that will work even if it's there 🙂

Thanks!

- Ty 

[Farid]

Hi @Ty

Thanks for your answer

You were right, I had one more cloosing div and I removed it.

I followed your guides and keep my Bootstrap codes:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

in the head of my page's coloned template and cut that act Main js and pasted it in a js file and got the public URL. Then I put the url

<script type="text/javascript" src="[({{ get_public_template_url("Custom/page/js/Mjs.js") }}]"> </script>

in my page's html head by Edit Head HTML in Advanced Options of Setting. 

I see now that my menu has the function as I want but I lost the fixed position of my header menu and also its mobile responsivity. Maybe I didn't understand good where I have to put this URL.

You said to including that in your site's header. Could you explain me more please.

Thanks

Best regards

Farid