Hello,
I purchased Bootstrap Studio about a month ago, and I have to say I love it. I think it could use some updates to allow javascript, etc. I have a website I'm building, and I'm using a sticky header. What I'd like to do is change the color of the nav, and add some opacity to it, while keeping the transition smooth. I have this in a website not designed with BSS, but when I attempt the code, and apply the name of the css property, it fails to replicate. Any ideas?
have you imported your full CSS and JS files into BSS for replicating your site? If not, start there and see if it works then. Could be you are missing a class/js component it needs to work correctly.
Need to see the code, or the live site to diagnose.
Here is what I'm working on:
https://wwow.bss.design/
Here's my personal site that actually has the feature: http://steadfastfaithministries.com
I'd love the feature added to Bootstrap Studio. I must say I LOVE the software :)
Create a new JavaScript file and add this code... $(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("nav").addClass("scrolled");
} else {
$("nav").removeClass("scrolled");
}
});
});
Then add these classes to your stylesheet .navbar { background-color: rgb(255,255,255); -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; }
.scrolled { background-color: rgba(0,0,0,0.75); -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; }
You will get the effect you want.
Thank you so much :) It would be nice if they integrated that into Bootstrap Studio! When I purchased my license, I did the lifetime :) I'm very proud of it, and I highly recommend it!
Did the change, but it's not working :(
You need to remove the inline styles you've applied to the navbar. Inline styles will override styles in the CSS files.
I've opened your site and done the edits, and it's working.
@PrintNinja.. Which lines? The inline styles are automatically done with bootstrap studio!
This is the line that is causing your issues...
style="background-color: #ff0000;filter: blur(0px);opacity: 1;"
When you change a component's appearance in Bootstrap Studio through the Look & Feel Panel, you will see at the top there is a dropdown menu that looks like this...
You should generally choose to create a CSS block. By default, Bootstrap Studio applies styling as inline CSS (Style Attribute), but this is a highly discouraged practice in web design. Inline styles override external stylesheets, which robs you of the main benefits of CSS - the Cascade, and the universal styling across the entire site. It also causes problems like the one you are experiencing... we are applying a class with javascript that has no effect because the class is being overridden by the inline style. You need to go into the Look & Feel panel, select the navigation menu and reset all the settings.
When you are comfortable writing CSS, you will rarely even use the visual styling tools in the Look & Feel panel because it's just quicker to type the classes and rules directly into the Style editor at the bottom of the screen. If everything I'm describing here sounds like Greek to you, you need to take a course in CSS. It's pretty much mandatory to know how to code CSS if you want to be able to customize websites with features like this fading header.
I suck at CSS I think.. but I'll give this a whirl :) Thanks!
You're going to need to know CSS in order to really use the app to it's full extent and get all the bells and whistles that you want for your sites. HTML too for that matter. Would be very beneficial to you to find some good tutorials online (many are free or really cheap) and get some training in them so you will have a better grasp at how to use things in the app. It's definitely not your typical "everything is drag and drop and no coding experience needed" type of app.
The script you added, you added to the footer of your site rather than part of your script file or after it as it's own script file. Because of this your added script comes before jQuery is loaded therefore your added script doesn't run.
Saj
Used the Header tags to add the code in. I think they should still add this as an option to BSS :)
You should add it by way of the Design pane at the bottom right of the app. Then right click on the JavaScript section and select new, give it a name and then double click to load the script file and paste in the code. That will make it work for you.
Saj
Used the Header tags to add the code in. I think they should still add this as an option to BSS
That's not the proper solution. Delete the inline style, and then follow the instruction I or Saj gave you.
(and you can add code to the head section through file > design settings, but you shouldn't place javascript or CSS in the head section.)