-
Posts
-
Hej, some question on header options, mostly relating to transparent header on http://flymotions.com
1) Social Icons Color
Is there a way to get transparent header also on mobile devices?2) Social Icons Color
Using following code I turned the grey social icons to white. Problem: On a mobile device header isn’t transparent – social icons white on white = invisible. How to leave them standard color (grey) on mobile devices?/*** Farbe der Social Icons Grau / weiß bei Transparentem Header https://kriesi.at/support/topic/changing-color-of-social-icons-in-transparent-header/ ***/ #top .av_header_transparency .social_bookmarks li a { color: white !important; }3) Color of transparent header
Background images differ. May I have different transparent header colors per site or even per slider background image to be able to read the header all the time – no matter whether background is dark or light colored?4) Shrinking Header Logo Problem
With transparent header is also switched to shrinking header. I recognize problems with logo on my high resolution display. When loading logo is super sharp. Once shrink or enlarge back it’s (mostly) not sharp anymore.5)Header below Image or Slider?
Is there an (buildt-in-?)option to have main navigation below image/slider? Let’s say 2nd menu and Social Icons on top and transparent. Main navigation below Image. Once scrolling down make header stick to top (mostly like seen here: http://moun10.ch)5)Mobile menu options
Easy way to have mobile submenu like seen (also) here http://moun10.ch)?6)How to ask for support
Is it good if I ask all these questions in one thread or would you prefer to have separate threads (next time)?Cheers, Felix
Hey flymotions!
please make a quick forum search before opening a new thread.
1.) Refer to this answer: https://kriesi.at/support/topic/how-can-i-make-the-header-transparent-in-mobile-view/#post-230165
2.) Just use the same code and add media queries for mobile devices to it:
@media only screen and (max-device-width: 736px) { #top .av_header_transparency .social_bookmarks li a { color: grey !important; }}3.) Not sure if I understand correctly. Do you want to use different headers on different sites of your page? if yes you would need to search a plugin like this for this kind of function: https://wordpress.org/plugins/custom-header-extended/
4.) This is only happening for a very short time and I think it’s a standard behavior as it needs some time to render (load). Have in mind that the logo is not a vector file and instead it’s a pixel file (which is why it needs to be reloaded when changing image size).
5.) No. You would need to find a plugin for it o customize your website.
6.) Would be best to use different tickets for different questions, as you would get a faster reply, because then we can answer simultaneously and other people searching for answers don’t get confused by different answers and/or questions.
Cheers!
AndyThank you. Lots of good hints.
to 1)
Adding
.fixed_header #header { position: fixed !important; }to Quick CSS doesn’t turn the header to be transparent on my mobile device. Any idea?
Hi!
1- Please add following code to Quick CSS instead
@media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; position: absolute!important; }}Best regards,
Yigitto 1)
Thank you. Almost perfect.
What’s not working – Logo and menu don’t change to the colors defined for transparent headers.
- You must be logged in to reply to this topic.