Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • November 8, 2019 at 8:37 pm #1155103
    bemodesign

    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!

    November 11, 2019 at 5:49 pm #1155685
    Victoria

    Hey bemodesign,

    Please have a look at the following thread:

    Transparent header mobile devices. New Thread!

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

    November 13, 2019 at 3:12 am #1156249
    bemodesign

    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;
    }}

    November 13, 2019 at 3:15 am #1156250
    bemodesign

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

    November 14, 2019 at 2:42 am #1156597
    bemodesign

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

    November 14, 2019 at 12:29 pm #1156736
    Victoria

    Hi bemodesign,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    November 14, 2019 at 6:33 pm #1156864
    bemodesign

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

    November 14, 2019 at 6:45 pm #1156866
    bemodesign

    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.

    November 15, 2019 at 6:08 pm #1157248
    bemodesign

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

    November 15, 2019 at 9:14 pm #1157299
    Victoria

    Hi bemodesign,

    Best regards,
    Victoria

    November 15, 2019 at 11:31 pm #1157353
    bemodesign

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

    November 16, 2019 at 12:42 pm #1157439
    Rikard

    Hi,

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

    Best regards,
    Rikard

    November 16, 2019 at 7:51 pm #1157523
    bemodesign

    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.

    November 18, 2019 at 5:51 pm #1157930
    bemodesign

    Any help with this please?

    Thanks

    November 19, 2019 at 9:51 pm #1158285
    bemodesign

    Please let me know on this. Thanks

    November 21, 2019 at 1:22 am #1158661
    bemodesign

    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)

    November 21, 2019 at 7:08 am #1158726
    Ismael

    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

    November 21, 2019 at 8:24 pm #1158934
    bemodesign

    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!

    November 22, 2019 at 10:26 am #1159053
    Ismael

    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

    November 22, 2019 at 7:18 pm #1159303
    bemodesign

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

    November 25, 2019 at 3:44 am #1159748
    Ismael

    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

    November 25, 2019 at 3:49 am #1159750
    bemodesign

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

    November 25, 2019 at 4:57 pm #1159916
    Victoria

    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

    November 25, 2019 at 5:43 pm #1159929
    bemodesign

    That worked!! Thanks for all the help!

    November 26, 2019 at 3:35 am #1160165
    Ismael

    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

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