Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • April 9, 2020 at 4:43 pm #1202388
    satucker

    I’m working in Enfold with the transparent header and using the mobile menu. While the transparent header is up the hamburger menu and the search icon are grey and once the user scrolls up and the transparency goes away, the two icons stay gray. I’d like the hamburger menu and the search icon to be white and then to change to gray once the transparent menu background changes to white.

    Also, in the icon bar above the header that holds the social media icons and the phone number. I replaced the phone number with an email address but the email address won’t change colors like the rest fo the social icons. I’d like it to be white on the transparent background and grey on the white background.

    April 9, 2020 at 7:54 pm #1202466
    Jordan Shannon

    Hey satucker,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    April 9, 2020 at 7:58 pm #1202472
    satucker
    This reply has been marked as private.
    April 11, 2020 at 1:37 pm #1202883
    Victoria

    Hi satucker,

    You can set the menu color set for header transparency here
    https://share.getcloudapp.com/E0ub2vXK and the color for the non-transparent header is the normal menu color links color.

    Best regards,
    Victoria

    April 12, 2020 at 3:01 am #1203018
    satucker
    This reply has been marked as private.
    April 15, 2020 at 5:34 am #1203840
    Rikard

    Hi,

    I’m very sorry for the late reply. I’m having trouble understand what you are looking to achieve, do you want the header to be transparent at first, then turn solid after scroll? If so then that can be set in the Layout menu on the page in question. If you need help with CSS to change the colour of the burger menu in different states then we can help you with that after you have made the settings to the header which you intend to use.

    Best regards,
    Rikard

    April 15, 2020 at 5:43 am #1203842
    satucker

    Now my needs are slightly different. Can I get a shortcode that makes the header permanently transparent and makes the hamburger menu, search icon and social icons (in the secondary header) permanently white? In other words, the header is permanently transparent and all menu and secondary menu items stay white all the time.

    • This reply was modified 4 years, 7 months ago by satucker.
    April 16, 2020 at 4:47 am #1204232
    Jordan Shannon

    Hi,

    Have you tried activating the default transparency options?

    dit the page then set the Layout > Header visibility and transparency to “Transparent Header”.

    Best regards,
    Jordan Shannon

    April 16, 2020 at 2:17 pm #1204433
    satucker

    I can’t seem to get the header to stay transparent. Its only transparent until scroll. How do I force it to stay transparent all the time?

    April 18, 2020 at 8:14 am #1204839
    Rikard

    Hi,

    You should be able to do so by setting the header settings to “Transparent header” in the Layout menu on the page in question.

    Best regards,
    Rikard

    April 18, 2020 at 2:23 pm #1204918
    satucker

    The settings on this page are set to transparent. When one scrolls down on that page, the header then turns to white. I need it to stay transparent the whole time.

    April 18, 2020 at 3:57 pm #1204968
    Jordan Shannon

    Hi,

    That is how it functions because a transparent header conflicts this the page content. You won’t really be able to see the menu. Is this okay with you?

    Best regards,
    Jordan Shannon

    April 18, 2020 at 3:59 pm #1204970
    satucker

    My customer is aware of the risk and still wants the header to be fully transparent all the time.

    April 18, 2020 at 5:16 pm #1205041
    Jordan Shannon

    Hi,

    Try adding this code in Quick CSS (located in Enfold > General Styling):

    #header_main {
    border: 0 !important;
}

#top .header_bg {
    background: transparent !important;
}

    Let us know if it works :)

    Best regards,
    Jordan Shannon

    April 18, 2020 at 9:36 pm #1205123
    satucker

    That forces the background to be transparent but still changes the color of the icons.
    I’m not sure how to say it different than i’ve already said in the thread but I need the header to be transparent at the top and on the scroll and I need the icons for the hamburger menu, the search and the icons in the secondary header and the logo to stay white all the time.
    How can I do this?

    • This reply was modified 4 years, 7 months ago by satucker.
    April 20, 2020 at 4:15 am #1205370
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

      .phone-info a, .phone-info,.header_color .main_menu ul:first-child>li>a,.header_color .social_bookmarks a {
  color: #fff !important;
  }
  .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
  color: #fff !important;
  }
  .html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after,.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
  background-color: #fff !important; 
  }
.header_color .container_wrap_meta {
	background: transparent !important;
}
#header #header_meta,.header_color li {
    border: none !important;
    border-color: transparent;
}
.html_av-overlay-side #top .av-burger-overlay-scroll {
    background: rgba(255, 255, 255, .3) !important; 
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.