Color transition effect in the navbar of a bootstrap template in Rails

Asked

Viewed 238 times

0

Hello, I am using a template of startbootstrap, the Agency, I was able to import it to the Rails project, I put the theme in the vendor folder, I imported the scss in Aplication.scss and I put the requirements in Aplication.js, scss finds Agency.css, stylizes the screen, but some effects do not work, these effects are:

  • Slide from the screen by clicking on the link;
  • And the navbar does not change from Transparent to a solid color.

Unfortunately no error appears in the log, nor when I try to inspect the screen, it does not lack any js, I have no idea what could be going on, if anyone can help me I thank, I have rode the stackoverflow, the ruby community on Rails, the ruby group of the telegran, numerous sites on google, and I can not fix this problem, I’ve tried to take the turbolink as I’ve asked to try but nothing has helped either.

I don’t know if these effects come from jquery, jquery.easing or even bootstrap.js, I’m totally lost on this problem. If you need more information, ask me

I appreciate the help.


Well, I’ll summarize to be more specific as requested, I believe that many who work with bootstrap have already seen those templates from the startbootstrap page or even on other sites where you click on the navbar link and the page slides to that part, for a better view, follow the link of the template I’m using Template Agency, two effects are not working together with the Rails and would be:

  1. The sliding effect as I click on the links
  2. Change the Transparent navbar to a solid color

I do not know if Rails requires something else or parameter to be able to make these effects work, I believe that with the template to see what I am talking about it is easier to view, if I use only html works, if I use together with Rails these effects do not work.

  • Clarify your specific issue or add other details to highlight exactly what you need. The way it’s written here, it’s hard to know exactly what you’re asking. See the page How to ask for help in clarifying this question.

2 answers

0

By further studying the subject, we know the code

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

should stay in the head, because it is good practice, so to fix definitely and maintain good practice we should open the main js file, in this case the Agency.js that should be found in the vendor folder and put a $(document).ready before the initial Function so that this file only loads after all the html has loaded, with this we can get back the

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

to the tag head which is your correct place.

0

Thanks to those who read and even thought to help me, my mistake was that part of the code:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

was on the tag head and should be on the tag body below the footer.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.