Blank space with naked header

[noxdiurna]

Hi.

I just bought your theme and it being my first WP experience, I’m pretty lost. But I see the effort and talent that went into creating it and I am eager to make a functioning website with it.

I have a small issue with your naked header. Apparently, this issue has been raised by many but for some reason, all of them just magically found answers by themselves, leaving me with posts with very little council.

I have a blank space between the parallax picture and the top of the screen that I can remove. I did follow your guidance on the KB manual. Either I am blind or I seriously am doing something wrong.

Here is the link to the page.
http://www.minoeurope.com/?page_id=32

Please help.

[Kyle – SUPPORT]

Hi

You need to add mt0 to the extra class field of your parallax asset

– Kyle

[noxdiurna]

Thank you so much. I didn’t expect it to be that simple and now I understand why others just managed to solve the issue by themselves. Plus, now I search the forum with m0 as keyword, I find loads of answers already published on the matter.

But now I have that problem solved, I have a question. I would like to make my navigation bar change color to white a lot further down scrolling (basically when the bottom of the parallax picture reaches the top of the browser window). Can you guide me who to configure that aspect of the theme?

[Kyle – SUPPORT]

Hi

Unfortunately that’s not possible, sorry

– Kyle

[noxdiurna]

OK. Thanks for the reply. I will try to conceive the page with smaller parallax.

Otherwise, I just noticed that the logo on the parallax jumps at least 10ish pixels with the appearance of the header when scrolling down. Who may I solve this issue?

[noxdiurna]

Seriously, sorry about bothering you but I see that the logo size and position on naked header is visibly different from the rest of the pages. It’s only a detail but it is bothering me quite a bit. Please help.

[Kyle – SUPPORT]

Hi

You need to change the css to match your logo size, there are a few widths and heights set for the logo, you will need to change these values

– Kyle

[noxdiurna]

That’s what I figured but how do I change the size of the logo on the sticky menu? Sorry for the lack of understanding but as you might have figured, i have very limited knowledge on css.

[noxdiurna]

Just to precise, I managed to resize the logo on naked header to have perfect correspondance to the rest of the page but I am having difficulties to find a way to resize the one on sticky nav. You can compare the logo on sticky menu from these two pages.

http://www.minoeurope.com/?page_id=15
http://www.minoeurope.com/?page_id=32

[noxdiurna]

I am really sorry for harassing but I am beginning to understand that the learning curve for WP and it’s complex association to CSS and HTML is a lot too much for a noob like me.

I followed the instructions on the KB for replicating the naked menu but I also notice that my nav menu doesn’t fade away like the one shown on the demo page.

http://support.swiftideas.net/forums/topic/fading-sticky-header-like-the-naked-header-example/

I did found a thread talking about it but once again, he/she found the answer all by himself and I am left without guidance.

Thank you in advance for your help.

[Kyle – SUPPORT]

Hi

For the logo you need to se the correct size in header options, you then need to make sure you match the size in the css for the naked header when it goes sticky.

For the fade please add this custom css:

#header-section.header-6 #header {
  transition: background-color 0.5s ease-in-out 0s;
}

– Kyle

[noxdiurna]

First, thank you.

Second, I am a moron. I realized that my pictures were not the same size. I believe that Photoshop resized it somehow since I made the B&W version from the original color version. And they appear to have different size.

Third, I still notice a “jump” when the sticky header appears when I scroll up slowly. If this can be solved (even if it is not a major issue), I will be over with the header problem.

http://www.minoeurope.com/?page_id=32

[Kyle – SUPPORT]

Hi

Ok great

Sorry, change the code to:

#header-section.header-6 #header {
  transition: all 0.5s ease-in-out 0s;
}

– Kyle

[noxdiurna]

Thank you for the follow up but I think that the code is not adapted to my website. Please check the concerned page.

http://www.minoeurope.com/?page_id=32

[Kyle – SUPPORT]

Sorry remove that and try this instead:

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
  transition: background 0.5s ease-in-out 0s;
}

– Kyle