Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #1013645

    Hello together,

    On desktop devices, I am using the glassy and sticky menu and wanted to do so on mobile devices as well.
    Therefore, I used the two code snippets from your documentation:

    https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile

    /* Transparent header on mobile */
     @media only screen and (max-width: 767px) { 
    #top #wrap_all .av_header_transparency, 
    .av_header_transparency #advanced_menu_toggle {
      background: transparent!important;
      position: absolute!important;
    }}

    https://kriesi.at/documentation/enfold/header/#sticky-header-on-mobile

    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
      .responsive #top #main {
        /* Margin top value should be equal to header height*/
        margin-top: 180px;
      }
      .responsive #top #wrap_all #header {
        position: fixed;
      }
    }

    On desktop devices, the menu displays a different logo and a different font-color whenever the glassy menu is active. On mobile it does not.

    How do I apply the transparency logo and the white font-color (search icon & burger menu) on the glassy mobile menu?

    PS: I had to remove the margin-top from the sticky code snippet or otherwise an ugly bar would have been shown underneath the glassy mobile menu. Maybe this could be noted within your documentation as well.

    Best regards,
    Marc

    #1013782

    Hey Marc,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
        .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
            opacity: 0;
        }
        .responsive #top .av_header_transparency .logo img.alternate {
            display: block;
            opacity: 1;
        }
        .av_header_transparency #menu-item-search {
            color: #fff;
        }
         .av_header_transparency .av-burger-menu-main.menu-item-avia-special .av-hamburger .av-hamburger-inner,
         .av_header_transparency .av-burger-menu-main.menu-item-avia-special .av-hamburger .av-hamburger-inner:before,
         .av_header_transparency .av-burger-menu-main.menu-item-avia-special .av-hamburger .av-hamburger-inner:after {
            background-color: #fff;
         }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1014198

    This is working just fine, thank you.

    I still noticed that there is a difference comparing the desktop and mobile menu.
    On mobile devices all sticky main menu items except for the burger menu show another font-color (#ffa600) than the items on the sticky desktop menu (#000000).

    How can I adjust this, so the mobile menu works just as the desktop menu regarding the colors?

    #1014368

    Hi Marc,

    The code I gave you does not switch the color, it just shows one logo and hides another one. You can try adjusting colors if you need.

    Best regards,
    Victoria

    #1014401

    The question was not regarding your code snippet but rather another difference I noticed between the mobile and the desktop menu.
    As all the colors within the Enfold General Styling > Logo area are set the way I like them, I don’t know why the mobile version displays them otherwise.

    Sticky desktop menu: menu links (not active) = #000000
    Sticky mobile menu: menu links (not active) = #ffa600

    How can I adjust the sticky mobile menu font color without affecting the sticky desktop menu font color?

    #1014758

    Hi Marc,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width:767px){
        #av-burger-menu-ul .avia-menu-text {
            color: #000;
        }
    }
    

    But the close menu button stays white and the search icon is visible on the burger overlay, do you want that?

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1014798

    I think we are getting there fairly quick and yes, the search icon can stay visible on the unfolded burger menu.
    The font-color on the sticky mobile menu now is the same color as on the sticky desktop menu.
    Some elements still behave differently though:

    – The search icon on the sticky mobile menu is #ffa600 (on desktop: #000000).
    – Active elements on the sticky mobile menu are #000000 (on desktop: #ffa600).
    – The burger menu on the glassy mobile menu stays #ffffff once the menu is unfolded, instead of turning black like the other menu elements and therefore it is invisible.

    How can we get those things aligned the right way?

    #1015107

    Hi,

    1-3.) Did you add this css code?

    .av_header_transparency .av-burger-menu-main.menu-item-avia-special .av-hamburger .av-hamburger-inner, .av_header_transparency .av-burger-menu-main.menu-item-avia-special .av-hamburger .av-hamburger-inner:before, .av_header_transparency .av-burger-menu-main.menu-item-avia-special .av-hamburger .av-hamburger-inner:after {
        background-color: #ffffff !important;
    }
    

    Please disable it temporarily and then replace it with these css codes.

    .av_header_transparency #menu-item-search {
        color: #ffffff !important;
    }
    
    .av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::before, .av-burger-overlay-active #top .av-hamburger-inner::after {
        background-color: #000000 !important;
    }
    
    .html_av-overlay-side.av-burger-overlay-active #top #wrap_all #header .menu-item-search-dropdown a {
        color: #000000;
    }

    Best regards,
    Ismael

    #1015311

    Unfortunately, this doesn’t solve the issues.
    Now the following occurs:

    – The search icon on the sticky mobile menu is still #ffa600 (on desktop: #000000).
    – Active elements on the sticky mobile menu are still #000000 (on desktop: #ffa600).
    – The burger menu on the sticky mobile menu is now #000000 and therefore visible when unfolded, but it is also #000000 when the burger menu is collapsed (on desktop: #ffffff).

    I would just like the menu to look and behave exactly as it does on the desktop devices.
    How can this be fixed?

    PS: For future updates wouldn’t it make sense to incorporate the feature, that if one decides to choose a transparent and glassy menu, this also applies to mobile devices?

    #1016852

    Hi,

    I would like to apologize for the late response. Please use the following css code instead. This css code should set the search and mobile menu color to white on page load and then turn the color to black when the page is scrolled. It will also turn the color of both elements to black when the mobile menu is active.

    @media only screen and (max-width: 767px) {
    .header_color div .av-hamburger-inner, .header_color div .av-hamburger-inner::before, .header_color div .av-hamburger-inner::after {
        background-color: #ffffff;
    }
    
    .header_color.header-scrolled div .av-hamburger-inner, .header_color.header-scrolled div .av-hamburger-inner::before, .header_color.header-scrolled div .av-hamburger-inner::after {
        background-color: #000000;
    }
    
    .av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::before, .av-burger-overlay-active #top .av-hamburger-inner::after {
        background-color: #000000 !important;
    }
    
    .html_av-overlay-side.av-burger-overlay-active #top #wrap_all #header .menu-item-search-dropdown a {
        color: #000000;
    }
    
    .header_color.header-scrolled #menu-item-search {
        color: #000000;
    }
    }

    Let us know if that’s what you’re after.

    Best regards,
    Ismael

    #1019532

    This is indeed great progress.
    As far as I can judge from now, there is only one thing missing:

    – Menu elements on the sticky mobile menu are #ffa600 (on desktop: #000000). Only the active element should be displayed in #ffa600.

    Do you have a solution for this remaining issue?

    #1019749

    Hi,

    Include this css code inside the css media query.

    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
        color: #000000;
    }
    
    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul .current_page_item a {
        color: #ffa600;
    }

    Best regards,
    Ismael

    #1019962

    It’s working but now another thing seems to be odd again:

    – The search and burger icon on the sticky mobile menu are now #ffffff when the menu is collapsed (on desktop: #000000).

    Additional fact: Once you resize your desktop view to a mobile size, the search and burger icon color appear as intended (#000000) but if you open the browser on a smartphone, the search and burger icon color all the sudden stay #ffffff when scrolling. I have tested this with two different smartphones.

    This is the complete CSS code I’ve been using so far for menu media queries:

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency, 
    .av_header_transparency #advanced_menu_toggle {
    background: transparent !important;
    position: absolute !important;
    }
    
    .responsive #top #wrap_all #header {
    position: fixed !important;
    }
    
    .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;
    opacity: 1 !important;
    }
    
    .header_color div .av-hamburger-inner,
    .header_color div .av-hamburger-inner::before,
    .header_color div .av-hamburger-inner::after {
    background-color: #ffffff !important;
    }
    
    .header_color #menu-item-search {
    color: #ffffff !important;
    }
    
    .header_color.header-scrolled div .av-hamburger-inner, .header_color.header-scrolled div .av-hamburger-inner::before, .header_color.header-scrolled div .av-hamburger-inner::after {
    background-color: #000000 !important;
    }
    
    .header_color.header-scrolled #menu-item-search {
    color: #000000 !important;
    }
    
    .av-burger-overlay-active #top .av-hamburger-inner,
    .av-burger-overlay-active #top .av-hamburger-inner::before,
    .av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #000000 !important;
    }
    
    .html_av-overlay-side.av-burger-overlay-active #top #wrap_all #header .menu-item-search-dropdown a {
    color: #000000 !important;
    }
    
    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #000000 !important;
    }
    
    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul .current_page_item a {
    color: #ffa600 !important;
    }
    }
    #1020554

    Hi,

    Try to remove the !important rule from the css codes.

    Best regards,
    Ismael

    #1028943

    Unfortunately this doesn’t work either.
    For just applying the transparent & glassy header to mobile devices, this CSS has gotten big very quick.
    So far, I have removed all the CSS and stay with the standard solution until an easier solution is available (e. g. a checkbox in the backend).

    Is there a place I can submit a feature request?

    #1030146

    Hi,

    You can request for that feature in the request page but I don’t think it will get that much attention at this moment because the developers are busy with the upcoming WP 5.0 update.

    // https://kriesi.at/support/enfold-feature-requests/

    Best regards,
    Ismael

    #1030306

    Alright, thank you.
    This ticket can then be closed now.

    #1030580

    Hi Marc,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1039924

    It seems that this ticket has accidentally been left open.

    #1039966

    Hi Marc,

    Thanks for the update, I’ll close this ticket for now then :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Applying transparency logo and white font-color on glassy mobile menu’ is closed to new replies.