mobile version header

knm206 · March 2019

For the mobile version of my website, I want the header on the home page to be transparent but white on all the other pages. is that possible? I currently set it as transparent using the theme settings, but it made it transparent on all pages.

ngg.keyurmaru.com

Pablo · March 2019

Hi,

Yes, that's possible.

You have to create your own Custom Layout and attach it in your page options settings.

http://prntscr.com/mxoi0f

http://prntscr.com/mxoimp

Thanks

knm206 · March 2019

I've already attached one custom layout to my page which has a different header then the homepage. Is it possible to attach another layout to the same page for this issue?

Pablo · March 2019

You can apply only one custom layout per page.
Of course, you can use the same layout on other pages, but it's not possible to attach two custom layouts on the same page.
Thanks

knm206 · March 2019

Ok understood. So how can I accomplish my original question?

For the mobile version of my website, I want the header on the home page to be transparent but white on all the other pages. is that possible? I currently set it as transparent using the theme settings, but it made it transparent on all pages.

ngg.keyurmaru.com

Pablo · March 2019

Sure, paste this CSS in the Theme Options > Custom CSS & JS > CSS


@media(max-width:784px){
	body:not(.home) #Top_bar{
		background:white !important;
	}
}

Thanks

knm206 · March 2019

perfect! and last question on mobile how can I make the nav bar fixed to the top? right now when you scroll theres a small transition then it becomes sticky. I want it to just be fixed at the top with no transition when you scroll, just like how it is on the desktop version.

Pablo · March 2019

Unfortunately, It cannot be overwritten with CSS.

It's hard-coded in the theme files, so it cannot be disabled.

If you have some other questions, feel free to ask.

Thanms

mobile version header

Comments