Docs

[Laurie H]

Hi Themeco,

Hoping you can advise please….
My site is almost ready to go live, but i have an issue with implementing a fixed navbar on portrait devices 768 and under ie. ipad portrait/mobile.
I have tried the following (and other variations) in my child css:

@media (max-width: 768px) {
.x-navbar.x-navbar-fixed-top {
position: fixed !important;
}

On page load the rev slider with headline (at top) is in the correct position, but once the user scrolls down the page then back up again, the slider jumps up behind the top fixed navbar, so part of it cannot be seen. It needs to always sit under the fixed navbar, so always completely visible.
I have attached 2 screenshots.
Any suggestions very welcome please! I need to get this working correctly to go live 🙂

[Joao]

Hi There,

Please try the following code:

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Hope that helps,

Joao

[Laurie H]

Hi Joao
Thank you for the suggestion, unfortunately it makes no difference. I have tried loads of different options, but no luck so far. On initial page load the body class ‘x-main.full’ sits correctly underneath the fixed navbar. The navbar height is 70px. But on page scroll down & up, the ‘x-main’ scrolls all the way to the top of the page (ie. 0px top) and therefore visually sits behind the navbar. The main page is not respecting the fixed navbar!
So, when the page becomes active, the main page body ‘x-main’ needs to snap underneath the navbar, not to the top of the page as it does now.
Is there an active body class that I can target to achieve this? Or what else can you suggest? I just don’t know what else to try 🙁
I shall send you my WP login details, hoping you can take a look please.
Many thanks
Tracey

[Laurie H]

This reply has been marked as private.

[Joao]

Hi Laurie,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do.
I couldn´t notice any issue on your website, would you mind provide a screenshot of your issue so we can better understand you and help you?

Thanks,

Joao

[Laurie H]

Hi Joao

I have attached 2 screenshots. Please view on ipad portrait or similar or emulator (any device under 979px wide) . On screenshot 1 you will see the home page looks fine. If you then touch/scroll down the page, and then scroll back up again, you will see the page as per screenshot 2.
In screenshot 2, when scrolling back up the page, this makes the main page scroll completely to the top & partially behind the fixed navbar. This should not happen. So now part of the main text is hidden at the top of the page, behind the navbar.
I need the page to always look like screenshot 1, regardless of how many times the user scrolls up and down the page.
This problem does not occur on ipad landscape (width 1024).
Do you know how I can fix this please? 🙂
Many thanks
Tracey

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (max-width:  979px) {
	.home #x-section-1 {
	    padding-top: 50px !important;
	}
}

Hope it helps, Cheers!

[Laurie H]

Hi again…

Sorry but that does not work (as you can see in screenshot attached). This can’t work because it is an issue with the whole page, and all the other pages in the site. When the page becomes active (ie scrolling up & dpwn), the entire body of the page needs to respect the fixed header, and all the main content needs to sit under the fixed header, and not behind it at all.

When the header is not fixed, everything works perfectly. But, on ipad landscape (ie width 1024px) the header is fixed and all the page content sits correctly underneath the fixed header. I need to do the same for ipad portrait (979px and under), do you know how to achieve this?
I cannot find a way to make the page content sit under the fixed header correctly.
Many thanks in advance… really hoping I can find a solution to this problem soon 🙂

[Paul R]

Hi Laurie,

You can try this code instead.

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 70px;
}
}

Hope that helps

[Laurie H]

Hi Paul

Thank you!! I have it working correctly now:)
I did try that class before, but i targeted position instead of height, my mistake.
Very pleased its all looking great now. Thanks again
Great support as usual 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts