Topic: Transparency navbar and skins problem

Pierre Dommerc pro asked 6 years ago


Hi, I try to implement this layout : Full Page Intro with fixed, transparent Navbar with the dark skin. The problem is when I apply the skinn : <body class="fixed-sn dark-skin"> The nav bar lost its default transparency. How I can fix that ?

Akash Upadhyay free answered 4 years ago


i want to use this in angular but its not working...

rocwen free answered 5 years ago


Got the same issue. Solved by this post, Thank you.

Pierre Dommerc pro answered 6 years ago


Quite simply! Thanks you :)

Marta Wierzbicka staff answered 6 years ago


Hi, You can fix this problem by creating your new custom css file, then you copy css code from documentation: http://mdbootstrap.com/css/page-layouts/#i-f-t-n and then instead this part of code:
/* Navigation*/
    
    .navbar {
        background-color: transparent;
    }
    
    .top-nav-collapse {
        background-color: #4285F4;
    }
    @media only screen and (max-width: 768px) {
        .navbar {
            background-color: #4285F4;
        }
    }
You paste this code:
/* Navigation*/
    
    .dark-skin .navbar {
        background-color: transparent;
    }
    
    .dark-skin .top-nav-collapse {
        background-color: #3b3b3b;
    }
    @media only screen and (max-width: 768px) {
        .navbar {
            background-color: #3b3b3b;
        }
    }


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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
Tags