Make navbar on homepage transparent and non-sticky

[MagnusPeter]

Hey,

I want to make the navbar on the homepage of my site both transparent and non-sticky. I do however want to keep the navbar untouched in others sections of the site (like user pages, the explore page, etc.). In other words I want to change the navbar on one specific page. Is it possible to do this?

Thanks! 🙂

 

[Rodolfo]

Sure, use the bundled functions to tell which template is being used 😉

 

[MagnusPeter]

Thanks for the reply, but I'm still a bit unsure on what to do. Can you go into more detail about how this is done? 🙂

 

[MagnusPeter]

I changed [class="top-bar"] to [class="top-bar transparent background-transparent"] in the index.php file. This worked when I changed it in Chrome inspector, but when I changed the code in the actual file I ended up with a blank homepage. Am I on the right track here?

 

[Rodolfo]

You should inject the css using the admin dashboard.

 

[MagnusPeter]

Alright, so I injected this in the admin dashboard:

.top-bar {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 400;
background-color: rgba(26, 26, 26, 0);
}

This however changed all the headers on the site. How can I make it so that the code only affects my homepage?

Thanks!

 

[Rodolfo]

Put #home before .top-bar

 

[MagnusPeter]

Awesome! It works now. Thanks for the help! 🙂

 

[spazl]

it dosnt work for me...only works without the #home
like this?
#home.top-bar {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 400;
background-color: rgba(26, 26, 26, 0);
}

 

[Rodolfo]

#home .top-bar {

 

[mdshabbir]

Hi, MagnusPeter , spazl can i see your url please, I want to see how it looks

 

[spazl]

Hi, MagnusPeter , spazl can i see your url please, I want to see how it looks

Yes you can but i gotta Warn you it is 18+ Niche not safe for Work!!! you can check here