-
AuthorPosts
-
October 29, 2018 at 9:07 am #1027405
Good Morning,
i had updated to Enfold 4.5 and i use this shortcode to get the transparent header on Mobile.
### Transparentes Mobile Header # Menuefarbe # Transparent Logo ###{} @media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; } .responsive #top #wrap_all #header { position: absolute; } } @media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { color: white; } } @media only screen and (max-width: 767px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 0 !important; } .responsive #top .av_header_transparency .logo img.alternate { display: block !important; } .responsive #top .header_color #header_main { border: none; } } ### Transparentes Mobile Header # Menuefarbe # Transparent Logo ###{}
I get the transparent logo on the sites, the color from Burgermenu and Searchbutton is grey, but the white header background does not disappear.
What i have to change that it is working again?
regards dandy
October 29, 2018 at 6:12 pm #1027682Hey Manuel,
Add this to quick css:
@media only screen and (max-width: 767px) { #header{ background:none!important; } #header_main{ background-color: rgba(255, 255, 255, 0.0)!important; }}
Best regards,
Jordan ShannonOctober 29, 2018 at 7:58 pm #1027721Thx for your answer, with this code the header background is now transparent, but the content do not slip behind it.
How can i fix that, i get the transparent header and the first content (Layerslider) is shown behind as in desktop screen?October 29, 2018 at 9:00 pm #1027740Hi,
What do you mean the content doesn’t slip behind? This is what I’m seeing:
Is this not correct?
Best regards,
Jordan ShannonOctober 29, 2018 at 11:53 pm #1027779Hey Jordan,
on your picture, it is showing correct.
But not on my iPhonehttps://www.dropbox.com/s/3inzsuypqludm4i/IMG_4660643311C7-1.jpeg?dl=0
Here is my Screenshot.i Had add your quick css.And can you say me, why the burgermenu button and the search button is not white?
regards dandy
October 30, 2018 at 12:57 am #1027785Hi,
Please add my code to the very top of quick css so that it runs first and also clear the cache a few times over.
Best regards,
Jordan ShannonOctober 30, 2018 at 9:41 am #1027913I added the code at the top, but it doesn´t change anything
November 2, 2018 at 4:59 am #1028995Hi,
The header is already transparent but there’s nothing underneath it, so it’s displaying the default body background. Add this css code inside the css media query to move the main container upwards.
.responsive #top #main { margin-top: -80px; }
Best regards,
IsmaelNovember 2, 2018 at 2:04 pm #1029157Hello Isamel,
thx for your answer,i use now this code:
### Transparentes Mobile Header # Menuefarbe # Transparent Logo ###{} @media only screen and (max-width: 989px) { #header{ background:none!important; } .responsive #top #main { margin-top: -80px; } #header_main{ background-color: rgba(255, 255, 255, 0.0)!important; }} @media only screen and (max-width: 989px) { #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { color: white; } } @media only screen and (max-width: 989px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 0 !important; } .responsive #top .av_header_transparency .logo img.alternate { display: block !important; } .responsive #top .header_color #header_main { border: none; } } ### Transparentes Mobile Header # Menuefarbe # Transparent Logo ###{}
For the smartphones, this is now working with your code:
.responsive #top #main { margin-top: -80px; }
but not for tablet responsive. Can you help me please to fix this, too?
You can see in my code that i changed the search and burgerbutton to color white, but this is not working on transparent header.
Which code works to change the color of these symbols in enfold 4.5?regards dandy
- This reply was modified 5 years, 11 months ago by Dandy.
November 6, 2018 at 4:00 am #1030159Hi,
Thanks for the update.
You can use this css code to change the mobile/burger menu and search icon color:
@media only screen and (max-width: 989px) { .html_mobile_menu_tablet .header_color div .av-hamburger-inner, .html_mobile_menu_tablet .header_color div .av-hamburger-inner::before, .html_mobile_menu_tablet .header_color div .av-hamburger-inner::after { background-color: #ffffff; } #top #wrap_all .av_header_transparency .main_menu ul:first-child > #menu-item-search > a { color: #ffffff; } }
Best regards,
IsmaelNovember 6, 2018 at 9:08 am #1030296Hello Ismael,
thx for your answer.
now i have two problems.
When i go to a site which transparent header is not active, than the burgermenu is white, too. So i do not see my burgermenu on normal header, because headercolor is white. How can i change this, that the burgermenu is only white on transparent header (link in private section)?and my second problem is with upward the content on transparent header. I got this code from you:
.responsive #top #main { margin-top: -80px; }
to move the content on transparent header upwards. This works only on smartphone responsive. On tablet responsive it doesn´t work.
Can we fix this two problems?
regards dandy
November 6, 2018 at 3:19 pm #1030414Hi Guys,
just updated to 4.5. All is fine but the Burger Menu on mobile is not shown anymore on https://golfheroes.de
Please help me
Best
ButchermannNovember 6, 2018 at 8:48 pm #1030575Hi Butchermann,
Best regards,
VictoriaNovember 9, 2018 at 7:49 am #1031581Hi Victoria,
could you already have s look on my problem?Thank you
Best
ButchermannNovember 9, 2018 at 9:19 am #1031587can you please help me to fix it?
November 11, 2018 at 8:36 pm #1032311Hi butchermann,
Did you see my post in private?
Here what it was:
https://cl.ly/8739e595237c This code in this file
https://***/wp-content/uploads/maxmegamenu/style.css?ver=b3a2fc is hiding it.Best regards,
VictoriaNovember 11, 2018 at 9:34 pm #1032348HI Victoria,
thank you. Problem has been solved
Best
Butchermann
November 13, 2018 at 1:50 am #1032827Hi,
and my second problem is with upward the content on transparent header. I got this code from you:
Where are you testing it? Try to adjust the css media query a bit.
@media only screen and (max-width: 768px) { .responsive #top #main { margin-top: -80px; } }
Best regards,
IsmaelNovember 13, 2018 at 9:21 am #1032906Hello Ismael,
you understand me wrong. On smartphone responsive it does work.
On Tablet responsif from 768 to 989 it doesn´t work.http://quirktools.com/screenfly/#u=http%3A//dengler-cnc.de&w=768&h=1024&a=22&s=1
here you see, when tablet is select that the content does not swap upwards. On smartphone its working perfect.
- This reply was modified 5 years, 11 months ago by Dandy.
November 14, 2018 at 10:27 am #1033403Hi,
I see. Have you tried adjusting the css media query above? Change the max-width value from 768px to 1024px.
Best regards,
IsmaelNovember 14, 2018 at 10:42 am #1033404I have set this
@media only screen and (max-width: 989px) { .responsive #top #main { margin-top: -80px; } }
because my responsive ends on 990px but this does not work.
It swap upwards to 767px
but not from 768 to 990 and i do not find the problem why this will not work on tablet responsive.November 15, 2018 at 8:53 am #1033836Hi,
Did you enable the File Compression settings? It might still be using the old css. Try to disable the compression from the Enfold > Performance panel temporarily. Or post the login details in the private field so that we can test it.
Best regards,
IsmaelNovember 15, 2018 at 9:02 am #1033843no i do not use compression settings in Enfold.
and i flush tha cache many times.November 15, 2018 at 9:18 am #1033848November 15, 2018 at 9:40 am #1033858Here is the login.
i have deactivated the w3 total Cache Plugin, but it will not work, too,
November 16, 2018 at 7:21 am #1034308Hi,
It’s not working because there’s a lot of invalid codes in your Quick CSS field.
### TopBar im Mobile Header ausblenden ###{} ### TopBar Hintergrundfarbe ###{}
Those lines are not valid. A valid css comment should look like this:
/* ### TopBar im Mobile Header ausblenden ###{} */ /* ### TopBar Hintergrundfarbe ###{} */
Please remove those lines.
Best regards,
IsmaelNovember 16, 2018 at 8:50 am #1034327Good Morning Ismael,
i changed now but still not work on tablet, only on Smartphone with the swap upwards content :-(November 19, 2018 at 3:45 am #1034985Hi,
I adjusted the code a bit. The header becomes transparent when the screen width is less than 989px.
.responsive.html_mobile_menu_tablet.html_header_top #top #main { margin-top: -80px; } .responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left: 0; padding-right: 0; float: none; }
Best regards,
IsmaelNovember 19, 2018 at 9:18 am #1035083Hello Ismael,
thx for your help.
i Changed the margin-top to -90px because on tablet the 85px was not enough an we got 5 px transparent background.Now its working perfect.
THX !
regards Dandy
November 20, 2018 at 7:25 am #1035444Hi,
Awesome! Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.Thank you for using Enfold :)
Best regards,
Ismael -
AuthorPosts
- The topic ‘Transparent Header on Mobile doesn´t work on 4.5’ is closed to new replies.