Portfolio Padding

Hello!

I created a transparent to solid ‘on-scroll’ navbar.

It looks great except on the portfolio page, which sits too close to the menu.

Please see www.purfitstudio.com/results

Any advice?

Also, different issue, when I select ‘inline’ header and hide the logo/text with CSS the transparent to solid header looks great BUT the menu is no longer centered (shifted right). When I select ‘stacked’ header, the menu centers great - but is no longer transparent prior to scroll. Any ideas on this as well?

Thanks!

Hi Ashley,

Thank you for writing in, regarding the portfolio, I see you have this custom CSS to float the header above the content.

@media (min-width: 767px) {
	header.masthead.masthead-inline {
	    position: absolute;
	    width: 100%;
	}
}

Please update that to this:

@media (min-width: 767px) {
	body:not(.page-template-template-layout-portfolio) header.masthead.masthead-inline {
	    position: absolute;
	    width: 100%;
	}
}

So it won’t affect the portfolio page.

Regarding the second issue, please set the Layout to “Stacked” and Add this to Theme Options > CSS, to hide the logo bar.

.x-logobar {display: none !important;}

Hope it helps,
Cheers!

Thank you so much!

Both worked great - and it’s perfect!

Wait, almost. So now on the ‘home page’ it’s not transparent over the picture? Is that because I removed the float? It now transitions to grey then to white? Any advice?

Hello @ashfillmore1,

Please update the css codes:

@media (min-width: 767px) {
	header.masthead.masthead-inline {
	    position: absolute;
	    width: 100%;
	}
}

And then this one:

.x-navbar {
    background: rgba(0,0,0,0.65) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transition: 0.2s all linear;
}

Hope this helps.

Hello! I updated (I believe) to what you have above. I do not see a change? Thanks!

@RueNel I forgot to tag you in the above!

Hey @ashfillmore1,

I checked your homepage and I see you’re using stacked header so you need to find this code:

@media (min-width: 767px) {
	header.masthead.masthead-inline {
	    position: absolute;
	    width: 100%;
	}
}

And replace it with:

@media (min-width: 767px) {
	header.masthead {
	    position: absolute;
	    width: 100%;
	}
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

@Nabeel Thanks for the response! It fixed the home page which looks great now. The problem is on pages like ‘Results’ which is a portfolio page, it puts the images too close to the menu. This is also true for checkout pages. Is there a way to keep it exactly how it is, but separate the navbar from the page content on these pages? Thanks!

Hey @ashfillmore1,

To fix this, please replace the previously given code with the following:

@media (min-width: 767px) {
	.home header.masthead {
	    position: absolute;
	    width: 100%;
	}
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

@Nabeel Absolutely perfect! You guys are the best, thank you!

Glad we could help.

Cheers!

@Nabeel I hope all is well. So I have not changed anything in my CSS, but now it is not working again. The home page is perfect, but pages like ‘Services’ or 'About, have a solid white navbar instead of a transparent like the home page. Any way I can get the other pages to look like the home page? Thanks!

Hello @ashfillmore1,

The code given by @Nabeel will only affect the homepage.

@media (min-width: 767px) {
	.home header.masthead {
	    position: absolute;
	    width: 100%;
	}
}

If you want this to be applied to the other pages, have it updated and use this:

@media (min-width: 767px) {
	.home header.masthead,
	.page header.masthead {
	    position: absolute;
	    width: 100%;
	}
}

And please make some adjustments in your parallax background image in the sections because there will be a thick blue border on top.

We would love to know if this has worked for you. Thank you.

@RueNel Hello and thank you for the prompt response. Yes this corrected the issue, but it results in the previous issue where the portfolio pages like ‘results’ now have the navbar too close to the content. The same exists for checkout pages. Is it possible to exclude these pages?

Hi @ashfillmore1,

In that case, you would need to apply it per page ID.

 @media (min-width: 767px) {
	.home header.masthead,
	.page-id-3783 header.masthead,
        .page-id-3043 header.masthead,
        .page-id-155 header.masthead {
	    position: absolute;
	    width: 100%;
	}
}

The ID 3783 is for About page, then 3043 for Services, and 155 for contact. You can add more targetting other pages with ID. And please check this for finding the IDs https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps.

Thanks, I will try this out.

You are most welcome!
Kindly let us know how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.