Creating a Parallax effect for a home page

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Creating a Parallax effect for a home page

Stanley Davenport pro asked 7 years ago

When using the Parallax Effect where do I put the code below? Do I put it in an existing style sheet? If so which one?  Bootstrap CSS, Material Design CSS or Custom CSS? I understand what to do with the HTML coding. 
.top-nav-collapse {
    background-color: #82b1ff !important; 
}
.navbar:not(.top-nav-collapse) {
    background: transparent !important;
}
@media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
        background: #82b1ff !important;
    } 
}

h5 {
    letter-spacing: 3px;
}
@media (max-width: 740px) {
    .full-height,
    .full-height body,
    .full-height header,
    .full-height header .view {
        height: 700px; 
    } 
}

Thank you for the help. Just struggling to understand.

Marta Szymanska staff pro premium answered 7 years ago

Hi, you can put this CSS code within tags<style></style> on the top of your HTML file or to the custom.css file. Best, Marta

Stanley Davenport pro commented 7 years ago

Hey thank you Marta. Could I put the code in an existing CSS file so as not to bloat the HTML file? Forgive my novice mentality, just trying to learn something new. Thank You.

Marta Szymanska staff pro premium answered 7 years ago

Hi, you can put your CSS code to your custom CSS file but don't put the new code to the mdb.css file because it will make a mess in the core MDB CSS code. Best, Marta

Stanley Davenport pro commented 7 years ago

Thank You Marta.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Stanley Davenport
Pro User
5Support score
7Questions 4Answers
0Snippets likes 0Snippets