Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #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

    #1027682

    Hey 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 Shannon

    #1027721

    Thx 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?

    #1027740

    Hi,

    What do you mean the content doesn’t slip behind? This is what I’m seeing:

    https://snag.gy/1L40Oz.jpg

    Is this not correct?

    Best regards,
    Jordan Shannon

    #1027779

    Hey Jordan,

    on your picture, it is showing correct.
    But not on my iPhone

    https://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

    #1027785

    Hi,

    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 Shannon

    #1027913

    I added the code at the top, but it doesn´t change anything

    #1028995

    Hi,

    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,
    Ismael

    #1029157

    Hello 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.
    #1030159

    Hi,

    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,
    Ismael

    #1030296

    Hello 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

    #1030414

    Hi 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
    Butchermann

    #1030575

    Hi Butchermann,

    Best regards,
    Victoria

    #1031581

    Hi Victoria,
    could you already have s look on my problem?

    Thank you
    Best
    Butchermann

    #1031587

    @ismael

    can you please help me to fix it?

    #1032311

    Hi 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,
    Victoria

    #1032348

    HI Victoria,

    thank you. Problem has been solved

    Best

    Butchermann

    #1032827

    Hi,

    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,
    Ismael

    #1032906

    Hello 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.
    #1033403

    Hi,

    I see. Have you tried adjusting the css media query above? Change the max-width value from 768px to 1024px.

    Best regards,
    Ismael

    #1033404

    I 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.

    #1033836

    Hi,

    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,
    Ismael

    #1033843

    no i do not use compression settings in Enfold.
    and i flush tha cache many times.

    #1033848

    Hi,

    Ok. Can we access the site?

    Best regards,
    Ismael

    #1033858

    Here is the login.

    i have deactivated the w3 total Cache Plugin, but it will not work, too,

    #1034308

    Hi,

    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,
    Ismael

    #1034327

    Good Morning Ismael,
    i changed now but still not work on tablet, only on Smartphone with the swap upwards content :-(

    #1034985

    Hi,

    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,
    Ismael

    #1035083

    Hello 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

    #1035444

    Hi,

    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

Viewing 30 posts - 1 through 30 (of 30 total)
  • The topic ‘Transparent Header on Mobile doesn´t work on 4.5’ is closed to new replies.