Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #1155103

    I am using the Enfold Health Demo. The menu on desktops has the logo floating over the image, but on Mobile, it doesn’t. Can we have the mobile do the same as desktop? Starts with logo floating over image and then when scrolling, it shows the sticky menu? This company has that effect that I want: https://www.acceladvantage.com/
    I have attached my credentials.
    thanks!

    #1155685

    Hey bemodesign,

    Please have a look at the following thread:

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1156249

    Ok, that kinda worked. I add this code below, but it is using the wrong logo for the transparency. I have a gold logo and a blue logo. The GOLD logo is the first with the transparency and the BLUE logo is when it scrolls. But on mobile, they are both BLUE and it doesn’t show the GOLD logo at all.

    @media only screen and (max-width: 990px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    background: transparent!important;
    position: absolute!important;
    }}

    #1156250

    And the menu “burger” icon is gray, instead of white. Basically, it is set in the scroll colors

    #1156597

    And another MOBILE issue with these codes I”ve added is that the MENU is covering up the top portion of the page

    #1156736

    Hi bemodesign,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    #1156864

    Guys, that is the Website that I wanted it to look like. That works correctly. Mine is in private:

    #1156866

    On Mobile, the opening logo should be GOLD and the burger icon WHITE. Then is changes when you scroll, just like desktop. Internal pages menu is fine, but it is cutting off the top portion of the page.

    #1157248

    Please let me know on this. Do I need to remove some CSS or add more to fix this?
    Thanks!

    #1157299

    Hi bemodesign,

    Best regards,
    Victoria

    #1157353

    What? My website is fine. Need to check again.

    #1157439

    Hi,

    Great, I’m glad that your site is fine. Should we close this thread for now then?

    Best regards,
    Rikard

    #1157523

    Wait a second. I still need help with my last few requests. Victoria had a problem loading my website for some reason. I was simply saying that the website loads fine. BUT, I still need help with the issues.

    I have a gold logo and a blue logo. The GOLD logo(with white Burger menu) is the first with the transparency and the BLUE logo(with gray Burger menu) is when it scrolls. But on mobile, they are both BLUE and it doesn’t show the GOLD logo at all. On Mobile, the opening logo should be GOLD and the burger icon WHITE. Then is changes when you scroll, just like desktop. On the Internal pages, the top header is cutting off top portion of the page.

    #1157930

    Any help with this please?

    Thanks

    #1158285

    Please let me know on this. Thanks

    #1158661

    Can anyone help me with this issue please. It was never resolved because one of the Moderator couldn’t pull up my site for some reason. (and it has not has an issue opening up)

    #1158726

    Hi,

    Sorry for the confusion. You can use the following css code to reverse the gold and blue logo on mobile view.

    @media only screen and (max-width: 767px) {
        .responsive.html_mobile_menu_tablet #top .av_alternate_logo_active .logo a > img {
    	opacity: 1;
        }
    
        .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    	opacity: 0;
        }
    
        .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate {
    	display: block;
    	opacity: 1;
        }
    }

    Please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

    #1158934

    That worked great, but the Burger icons is still GRAY and it should be WHITE at first, and then turn gray when it scrolls. Like on the desktop.

    Thanks!

    #1159053

    Hi,

    Glad it worked. You’re welcome!

    For the burger menu, try to add this code inside one of the css media queries for mobile view.

    .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: white;
    }
    
    .html_mobile_menu_tablet .header-scrolled.header_color div .av-hamburger-inner, .html_mobile_menu_tablet .header-scrolled.header_color div .av-hamburger-inner::before, .html_mobile_menu_tablet .header-scrolled.header_color div .av-hamburger-inner::after {
        background-color: gray;
    }

    Best regards,
    Ismael

    #1159303

    That made the Burger icon White before the scroll, but it stays white after you scroll. Instead of changing to gray.

    #1159748

    Hi,

    Thank you for the update.

    It is working properly on our end. The burger menu turns to gray on scroll, but we noticed a few style issues, so we added a few css modifications in the Quick CSS field. Please make sure that the browser cache is removed before checking the page.

    Best regards,
    Ismael

    #1159750

    When scrolling on MOBILE, the burger icons stays WHITE instead of turning to GRAY.

    #1159916

    Hi,

    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: 989px) {
    .avia_mobile #top #header .main_menu .av-hamburger-inner,
    .avia_mobile #top  #header .main_menu .av-hamburger-inner::before,
    .avia_mobile #top #header .main_menu .av-hamburger-inner::after {
        background-color: gray;
    }
    .avia_mobile #top #header.av_header_transparency .main_menu .av-hamburger-inner,
    .avia_mobile #top  #header.av_header_transparency .main_menu .av-hamburger-inner::before,
    .avia_mobile #top #header.av_header_transparency .main_menu .av-hamburger-inner::after {
        background-color: #fff;
    }
    }
    
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1159929

    That worked!! Thanks for all the help!

    #1160165

    Hi,

    Awesome! Glad we could be of help. Please don’t hesitate to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Enfold Health Demo Mobile Header Menu Issues’ is closed to new replies.