Sticky header not using smaller logo

m0rg5 · September 2018

Hey again!
IN : Customising/Header setting/Sticky header - overwrites , there's an option to specify a sticky specific logo, yet while sticky is working, the new logo doesn't change. see : d2.reelists.co

I actually just want a smaller logo on sticky, and if I could just make a CSS call to resize the existing logo smaller, this would do it. Logo shrinks with sticky?

Can you pls give me the CSS for this?

Air · September 2018

Hey :-)

It seems you have turned off logo change. Please see option Appearance → Customize → Header Settings → Logo → option Use logos from header variants..

As for logo size on sticky header please see this answer:
https://support.apollo13.eu/discussion/comment/22534/#Comment_22534

With kind regards.

m0rg5 · September 2018

Hey,

I don't actually have the option ;Use logos from header variants' in: Customising/Header settings/Logo

CSS is working, but doesn't shrink-animate, just jumps to smaller size.
I'm talking animation - like sticky menu already has, but for the logo too.
I.e.

<img src="yourlogo.png" class="animate"/>
 .animate{
     transition: all 0.5s ease;
     }

Just adding

.animate{
     transition: all 0.5s ease;
     }

Doesn't work. Do I need to add a class to Logo, or?

While at it - you made me look at https://rifetheme.com/chillout2/ and I actually want nearly all the same content on a 1 pager homepage, but liked York design more.
Can I just import that 1 page homepage content (not fonts, etc) of Chillout2 quickly?

m0rg5 · September 2018

Also, at:
Customising ▸ Header settings ▸ Sticky header - overwrites

Neither 'background' or 'Mobile menu background color' work.
'Menu hover/active background color' works, but neither of the above.

Air · September 2018

Hey Morgan :-)

I am going to sleep so the whole answer I will give you tomorrow.
I bet you have turned off header color variants, so that is why you don't see some options, and overwrites doesn't work.

Enable it at least for sticky varaint in Appearance → Customize → Header Settings → Type, variant, background → Header color variants.

With kind regards.

Air · September 2018

Hey :-)

To shrink logo with animation add this custom CSS instead of previous one:

/* this will set up animation */
a.logo { 
    transition: max-width .5s, padding .5s, color .5s, opacity 0.5s;
}
/* this will set up desired width */
.sticky-values a.logo{
	max-width: 100px;
}

m0rg5 said: Can I just import that 1 page homepage content (not fonts, etc) of Chillout2 quickly?

Sure, use design importer and in import configuration check only Import demo content option. Rest of options - uncheck.
https://rifetheme.com/help/docs/installation-updating/importing-designs/importer-configuration/

With kind regards.

m0rg5 · September 2018

Hey, so yeah - the 'Use logos from header variants' was off because I had dark/light variants turned off (as an aside: this is confusing, would make a lot more sense to have this option in the logo section always - esp considering I wont be using any light/dark variants).

The background is now working fine.

Strange behaviour with Sticky logo - shows correctly in customizer (it didn't before), but not on frontend. Have tested and it's not a cache issue. d2.reelists.co
The CSS doesn't seem to do anything.

I imported Chillout2 demo content, it created no new pages, but did create Elementor templates, so that got the content into my 1pgr.
Is that the intended purpose, if other options turned off - to only create Elementor templates? (Didn't read this in documentation btw).

Air · September 2018

Hey Morgan!

m0rg5 said: would make a lot more sense to have this option in the logo section always - esp considering I wont be using any light/dark variants)

I don't think so, as this option is not only for light/dark but also for sticky. Also, it would do nothing with disabled header color variants.
In future, I want to hide whole panels of header light/dark/sticky variant when variants are disabled.

m0rg5 said: I imported Chillout2 demo content, it created no new pages, but did create Elementor templates, so that got the content into my 1pgr.
Is that the intended purpose, if other options turned off - to only create Elementor templates?

No, it is not what suppose to happen.
I think I know what happened: probably you already had the page with slug "home" and that is why it was not overwritten.
You will have to either change the slug of this page or delete it.

m0rg5 said: Strange behaviour with Sticky logo - shows correctly in customizer (it didn't before), but not on frontend. Have tested and it's not a cache issue. d2.reelists.co
The CSS doesn't seem to do anything.

I don't see your CSS added to the page at all. Could you verify that you have saved settings?
If you have any cache plugins active - disable them till you will finish theme customizations.

With kind regards.

m0rg5 · September 2018

No, it is not what suppose to happen.
I think I know what happened: probably you already had the page with slug "home" and that is why it was not overwritten.
You will have to either change the slug of this page or delete it.

Could be. Though, no other pages created either.

Air said: I don't see your CSS added to the page at all. Could you verify that you have saved settings?
If you have any cache plugins active - disable them till you will finish theme customizations.

I'd deleted it, it's back now.

The sticky header doesn't change size now at all - it is now as it was before I fixed 'colour variants' (which did make sticky logo smaller, tho no anim).

Also added sidebar-hide-on-mobile code I found here: https://support.apollo13.eu/discussion/4712/hidden-sidebar-only-desktop

m0rg5 · September 2018

While I'm at it - can I change the sticky shadow to white? (so more of a blurred edge on menu, than a shadow).

And there's no background colour options for Mobile menu in Customising ▸ Header settings ▸Main Menu , only hover colour.
I've made text white instead of BG, yet the BG is not opaque enough.
I also want more line spacing for mobile menu.

Air · September 2018

Hey Morgan:-)

m0rg5 said: I'd deleted it, it's back now.

The sticky header doesn't change size now at all - it is now as it was before I fixed 'colour variants' (which did make sticky logo smaller, tho no anim).

OK, I see that CSS selector was too weak to overwrite other rules. Please try this custom CSS instead(it worked for me in dev tools):

.header-horizontal .sticky-values a.logo {
    max-width: 100px;
}

Header height is dependant on logo size and its top/bottom padding which you can adjust in sticky overwrites panel.

m0rg5 said: While I'm at it - can I change the sticky shadow to white? (so more of a blurred edge on menu, than a shadow).

Sure, you can use such custom CSS to switch it:

#header.a13-sticky-variant, #header.a13-sticky-variant:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

m0rg5 said: And there's no background colour options for Mobile menu in Customising ▸ Header settings ▸Main Menu , only hover colour.

As menu color is dependant on header color it is set in its options and can be overwritten in header color variants. See option Customizing ▸ Header settings▸ Type, variant, background ▸ Mobile menu background color.

Maybe it will be a good idea to move this option as you suggest to Menu settings(colors). I will check out why did I place it here in the first place.

m0rg5 said: I also want more line spacing for mobile menu.

Please use this custom CSS:

.mobile-menu .navigation-bar .top-menu li a, 
.mobile-menu .navigation-bar .top-menu li span.title, 
.mobile-menu .navigation-bar .top-menu li li a, 
.mobile-menu .navigation-bar .top-menu li li span.title {
    line-height: 45px;
}

WIth kind regards.

m0rg5 · September 2018

Air said: Maybe it will be a good idea to move this option as you suggest to Menu settings(colors). I will check out why did I place it here in the first place.

Yeah, would make much more sense.

I can't see how the selected menu section is defined, I haven't defined anchor points, can't find it in code, yet the menu still detects the sections - see d2.reelists.co- it's stuck on 'Why' (because this is Home? I don't want 'home'), when you scroll down page it detects 'What'. How does this work?

Air · September 2018

Hey :-)

m0rg5 said: I can't see how the selected menu section is defined, I haven't defined anchor points, can't find it in code, yet the menu still detects the sections - see d2.reelists.co- it's stuck on 'Why' (because this is Home? I don't want 'home'), when you scroll down page it detects 'What'. How does this work?

Yes, it marks the current page as selected. That is why "Why" is selected.
"What" is the anchor that is getting selected when you scroll to it.

You have used mixed classic and "one-page" navigation and that is why it looks like this.

You say you don't want "home", but do you want other pages to be selected as "current"?
There is no option to disable "current" mechanics(you are the first one to ask about it).
Why do you want to disable marking current page?

With kind regards.

m0rg5 · September 2018

Howdy!

Figured it out - the simple answer:

The sections are defined in Elementor inline CSS - Section ID:
Click on section in Elementor: Advanced/CSS ID

There are no page anchors needed.

Air said: You have used mixed classic and "one-page" navigation and that is why it looks like this.

I don't know what 'classic' means. I assume you mean not 1-page.

Yes, I want one-page links and also to link to other pages - most sections in this one-page will have 'read more' + links to pages.
Isn't this what most/a lot of 1-pagers would do?

Air said: You say you don't want "home", but do you want other pages to be selected as "current"?

Yes exactly - I don't need a 'home' link, there's both the logo and up button for that.

So, I added link HOME as a test, have fixed the CSS ID's, the problems now:
- Section ID's are detected when visible, I need them to be detected when at top of page.
- HOME always active.
- Also, weird - click WHO, and HOME, WHY & WHO are all active (haven't figured why in code) - d2.reelists.co

Also - have you guys disabled Elementor inline-editing? Not working for anything - I notice it pop up on right clicks, but disappears https://developers.elementor.com/add-inline-editing/

Air · September 2018

Hey:-)

m0rg5 said: I don't know what 'classic' means. I assume you mean not 1-page.

Yup :-)

m0rg5 said: Isn't this what most/a lot of 1-pagers would do?

Concept of "most" is always tricky;-) It all depends on the situation.

m0rg5 said: - Section ID's are detected when visible, I need them to be detected when at top of page.

Funny enough I have talked with Daniel 2 days ago about changing this behavior of detecting section in one page.
It will be added in one of a future update, but I don't guarantee it will be top of the page. I will rather aim for the section to be fully visible and/or taking the majority of the view. It all depends on section height relative to screen height.

m0rg5 said: - Also, weird - click WHO, and HOME, WHY & WHO are all active (haven't figured why in code) - d2.reelists.co

This strongly corelates with what I have said above. Currently sections are selected when they get into view, but we plan to change it. Current solution is to use section at least screen high.

m0rg5 said: I don't need a 'home' link, there's both the logo and up button for that.

Just to be clear: "Home link" is not required by theme in any way. If you don't need it - remove it. I have just explained that your "What" page acted as home and it was selected cause of it:-)

m0rg5 said: Also - have you guys disabled Elementor inline-editing? Not working for anything - I notice it pop up on right clicks, but disappears https://developers.elementor.com/add-inline-editing/

Nope, we don't have such powers :-) Maybe one of your plugins is affecting this beahvior.

With kind regards.

m0rg5 · September 2018

Air said: m0rg5 said: - Also, weird - click WHO, and HOME, WHY & WHO are all active (haven't figured why in code) - d2.reelists.co

Air said:
m0rg5 said: - Also, weird - click WHO, and HOME, WHY & WHO are all active (haven't figured why in code) - d2.reelists.co
This strongly corelates with what I have said above. Currently sections are selected when they get into view, but we plan to change it. Current solution is to use section at least screen high.

But neither HOME or WHO* are visible, yet both show as selected.
* I get WHO might be by a pixel, but it's not 'visible' now with themes horiz sticky menu, and HOME definitely isn't, so this function is broken right? And fixing broken stuff is in everybody's interests innit?

Air said: Just to be clear: "Home link" is not required by theme in any way. If you don't need it - remove it. I have just explained that your "What" page acted as home and it was selected cause of it:-)

Ah yes, oversight on my part.

But please note HOME is always selected.

Air said:
m0rg5 said: Also - have you guys disabled Elementor inline-editing? Not working for anything - I notice it pop up on right clicks, but disappears https://developers.elementor.com/add-inline-editing/
Nope, we don't have such powers :-) Maybe one of your plugins is affecting this beahvior.

Ok, got it.

Air · September 2018

Hey Morgan!

Big thanks for the Coffee :-) !

m0rg5 said:
But please note HOME is always selected.

Yes, cause it is current page and it is not anchor. So it is not a bug, and while you don't want to use such link it shouldn't affect your work hopefully :-)
I will think about this while redesigning "selecting" machanism for one-page menu.

m0rg5 said: I get WHO might be by a pixel, but it's not 'visible' now with themes horiz sticky menu, and HOME definitely isn't, so this function is broken right? And fixing broken stuff is in everybody's interests innit?

As you said, it was visible for the browser, cause it had some padding, as the section, that already rolled into view.
It still works like I have planned it to work, so no bug here. However, what I planned is not what users expect from such behavior(unfortunately ;-) ), so I will get to change this soon.

With kind regards.

m0rg5 · September 2018

Air said: Big thanks for the Coffee :-) !

And thanks for all your help!

Air said: so I will get to change this soon.

Great, pls add me to any update list

Sticky header not using smaller logo

Comments

Howdy, Stranger!

Categories

In this Discussion

Sticky header not using smaller logo

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion