Full Page Intro with fixed, transparent Navbar not working

Topic: Full Page Intro with fixed, transparent Navbar not working

vrund pro asked 7 years ago

The navbar is not changing its background color when scrolling starts, everything else works. I am using this example - https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-fixed-transparent.html

Androxia

.top-nav-collapse {background-color: #4285F4;}@media only screen and (max-width: 768px) {.navbar {background-color: #4285F4;}}

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hi, Dear vrund, in which stylesheet file do you set color of

.top-nav-collapse class?

You have to add background-color styles in global stylesheet called: "styles.scss". He is in root/src folder of your's application. Just let me know, if it won't work in your's project. Best Regards, Damian

vrund pro commented 7 years ago

Yes, I have that .top-nav-collapse class in the styles.scss file. Thats the only class I need to make it change color on scroll right? Also, how is this class added to the DOM. I don't see it in my current HTML code. Is it dynamically being added?

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hello there, Yes, class is added dynamically to DOM through scripts. When you scroll down your's page, .top-nav-collapse is added to your's nav element. Just open your's project in browser, click F12 button to see browser's console, and inspect navigation. Now you should see that .top-nav-collapse is being added when you scroll down your's page. You have to edit only the main, global .scss file in your's project. Only styles from that stylesheet will work with this navigation. Best Regards, Damian

vrund pro commented 7 years ago

Hi Damian, I tried inspecting and it's not adding the class to the DOM. Is there any MDB javascript file that I need to include in the scripts array in angular-cli.json?

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Vrund, please tell me - do you added a class .scrolling-navbar to navbar component? If no, it won't work without this class. Best Regards, Damian

vrund pro commented 7 years ago

My navbar has <pre> <div><mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar transparent" [containerInside]="false"></div> </pre>

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hi, Vrund, let's check the last thing. If this solution won't solve your's problem, you have to send me your's code on my email address: d.gemza@mdbootstrap.com From below line:

<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar transparent" [containerInside]="false"></div>

try to remove class 'transparent'. It should now work. If not, just send me your's whole project to me. Best Regards, Damian

Add comment

Write

Create snippet

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: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

About author

vrund

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets