Mini Header advertised but not on actual theme

[consummate]

See attachments

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

The Mini Header is working in your site. Did you checked it in mobile or reducing the browser window size.

Not sure but the option was probably removed because there’s is always the need for the mini header be active. Add to talk to the development team to confirm this.

-Rui

[consummate]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Will forward this one to the lead developer so he can explain this situation of the Mini Header and what can be done with it.

Thanks
-Rui

[consummate]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Thanks for your input, that’s a good idea.
Let’s wait for the development team reply.

-Rui

[Swift Ideas – Ed]

Hi @consummate

Apologies for the confusion here. The mini header is the sticky header as such, and it does resize as you scroll down the page, see here: https://www.dropbox.com/s/fjctb2grh02tsrx/Screenshot%202015-02-09%2014.35.26.png?dl=0

Providing the output for two different headers with the same output isn’t good for performance at all. If you’d like the header to be smaller, we can assist with that.

– Ed

[consummate]

This reply has been marked as private.

[Swift Ideas – Ed]

Add this custom css:

.naked-header .header-wrap {
top: 0;
}

If you want naked header on mobile, you can add this custom css:

@media only screen and (max-width: 767px) {
.naked-header #header-section, .naked-header #header-section:before, .naked-header #header .is-sticky .sticky-header, .naked-header .is-sticky #header.sticky-header {
background: transparent;
}
}

Unfortunately changing that functionality would require adjusting the responsive css – currently we don’t have an option to set when the menu swaps from standard to mobile. It’s not feasible to detect how many mobile items are visible and then swap when space has run out, only swap on the detection of width of the viewport.

– Ed

[consummate]

This reply has been marked as private.

[Swift Ideas – Ed]

Yes, I tested the css before I provided it to you. Here is what I see on iPhone – https://www.dropbox.com/s/vp2vdw317fe8kfo/Screenshot%202015-02-10%2012.30.59.png?dl=0 – same on iPad too.

Looks like you’ve turned mobile sticky off though?

Try this custom css for the naked header height:

.naked-header nav#main-navigation .menu > li {
padding-bottom: 0;
}

– Ed

[consummate]

Go in, turn mobile sticky on with that naked header and you’ll see black at the top of the page on either phone or pad, or both. iOS 7 and 8 in my situation.

I turned it off because I’m 24 hours from deadline and team is reviewing my work.

I currently have all CSS you provided. The code to reduce vertical height on header is working very well. Thanks!

If I can have mobile sticky working the same across all devices that would be a bonus!

[Swift Ideas – Ed]

This reply has been marked as private.

[consummate]

Deadline came and went so I removed sticky, cloned the wordpress folder to root and went live.

I checked your code. Thanks for the help!
It’s better, but still has iPad bugs that make it unusable. See photos.

Naked is working, but when sticky header engages, the logo is supposed to change (bright green becomes dark green) and the navigation text (in landscape) is not supposed to disappear.

[Rui Guerreiro – SUPPORT]

Hi,

Can you upload the photos so we can see it?
-Rui