Question about Inline vs css block

Bootstrap Studio Help
1

Hey all, I have a question:

I’m trying to do a navbar that starts transparent and then gets a background as I scroll the page. This got me to thinking about inline vs css. I know that people seem to be on the fence about inline styling as apparently it can override .css, even when using !important? My question is if I select my navbar and set it to CSS styling - it still remains within inline; that’s ok, right? I assume it will default to using the css block?

2

Inline styles take precedence over external stylesheets (the files that end in .css)

Inline styles override internal CSS (like custom code blocks), and internal CSS overrides external CSS (stylesheets ending in .css), and external CSS overrides browser defaults. It doesn’t matter if !important is used in any of the CSS “above” the inline CSS.

One way to think about it is like layers. The “closer” the style is to the element, the higher precedence it has.

As a general rule, you should try to avoid using inline styles and the !important declaration (even though bootstrap’s own CSS uses it.)

As far as how this affects changing the background color of the navbar, I would not use inline styles. I normally do this using JavaScript to add a CSS class to a navbar to which I’ve assigned an ID. The CSS rules are then placed in an external stylesheet. Basic example…

JavaScript

const navbar = document.getElementById('myNavbar');

window.addEventListener('scroll', () => {
    if (window.scrollY > 50) { // Adjust this value based on when you want the color to change
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

And the CSS rules…

#myNavbar {
    background: transparent;
    transition: background .3s ease; /* So the transparency returns slowly */
 }

#myNavbar.scrolled {
    background: #79afff;; /* Change to your desired color */
    transition: background .3s ease; /* So the color changes slowly */
}
1 Like
3

I am fairly new to BSS 7. Would you mind sharing how to add that code. Even if it is a document or video would be good.
Thank you

4

Go to the Design panel (lower right), right click on JavaScript and choose New > JS File from the menu. Call it whatever you want (scroll.js for example.)

Double click your newly created JS file and the code editor will open this file in the right side of the HTML panel.

Copy the JavaScript from my example above, paste it into the JS file and click “Apply.” You should see this…

image
image834×245 11.3 KB

You can then close the scroll.js file in the editor panel.

Next, go to the design panel, expand the Styles and you should see styles.css. Double click this to open the CSS stylesheet in the code editor.

Copy the CSS rules from my example above, click the “Create” button in the editor and hit CTRL+V to paste the copied CSS rules into stylesheet. You should see this…

image
image833×288 8.31 KB

You can then close the styles.css in the editor panel.

Next, go to your Navbar component either by clicking on it in the workspace or selecting it in the Overview panel. Then go to the Attributes panel and in the ID field, enter, myNavbar . It should look like this…

image
image959×452 19.4 KB

Next, with the Navbar still selected, go to the Options panel > Navbar Options > Position and change it to either Fixed to top or Sticky top. (This is to ensure the Navbar doesn’t scroll out of the viewport when you scroll down on the website.)

image
image375×349 10.1 KB

Now add content to your page so the page will be scrollable. Preview the page in a browser, scroll down and you should see the Navbar change from transparent to a light blue color. Adjust the color in the CSS as desired.

(NOTE: You will not see the color change in the BSS workspace because JavaScript does not run inside Bootstrap Studio.)

Untitled-1

3 Likes
5

That was very nice of you to take the time to put this all together. Thank you :smiley:

6
2 Likes