Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • November 10, 2022 at 12:08 am #1372007
    AM-EventSolutions

    Hi team, I have a two part request that I cannot seem to figure out. I am hoping you can help.

    The first is main menu transparency. I set the homepage to transparent menu, but it stays white. If I select “hide until scroll” it functions as I want, except (of course) it hides the menu and I want it transparent until I scroll.
    I have tried the methods I found on the link below- which I might note is exactly what I am looking for, but the code is not working for me.
    https://kriesi.at/support/topic/transparent-main-menu/

    Second, I would like to remove the social icons and place a large, blue phone number in that place (you will see the phone number already is there, but is too small, not clickable, and placed too high and I cannot find where it originates from because it is not in the settings I see!)

    I am thinking the developer who did this put some customization in it, but he can no longer be reached.
    Can you help?

    Thank you!

    November 12, 2022 at 11:02 pm #1372357
    Mike

    Hey A,
    Thanks for your patience and the link to your site, to make your header transparent only on your homepage and make the menu items white when the header is transparent so you can see them I added this css:

    .html_header_top.html_header_sticky #header.av_header_transparency {
    background: transparent;
}
#top #header.av_header_transparency .av-main-nav > li > a {
    background-color: transparent;
}
#top #header.av_header_transparency .av-main-nav > li > a .avia-menu-text {
    color: #fff
}
#top #header.av_header_transparency .av-main-nav > li#menu-item-search > a {
	color: #fff;
}
#top #header.av_header_transparency .av-main-nav li:hover .avia-menu-fx, 
#top #header.av_header_transparency .current-menu-item > a > .avia-menu-fx, 
#top #header.av_header_transparency .av-main-nav li:hover .current_page_item > a > .avia-menu-fx {
    background-color: #fff;
}

    To remove the social icons I removed them at Enfold Theme Options ▸ Social Profiles, none of them had links so they would not do anything on click anyways.
    Then I added this css to make your phone number larger and move the menu over to make room:

    #header_main .phone_number a p {
	font-size: 47px;
}
#header_main .avia-menu.av_menu_icon_beside {
    margin-right: 336px;
}

    If you want the phone number smaller feel free to adjust
    please clear your browser cache and check.

    Best regards,
    Mike

    November 14, 2022 at 3:56 am #1372465
    AM-EventSolutions

    You are seriously my hero!

    Thank you SO MUCH!

    November 14, 2022 at 3:58 am #1372466
    AM-EventSolutions

    What would I add to bring it down so it is inline with the main menu? Is there some padding code I could add?

    Also I edited the size but it is not reflecting. Did I do something wrong?

    We want it to be very visible – in line with the main menu and about the same size .

    November 14, 2022 at 7:38 am #1372473
    Ismael

    Hi,

    Thank you for the update.

    You can use this css code to adjust the vertical position of the phone number.

    #header_main .phone_number a {
    top: -10px;
    position: relative;
}

    Also I edited the size but it is not reflecting. Did I do something wrong?

    Did you adjust the font-size value in this css rule?

    #header_main .phone_number a p {
    font-size: 64px;
}

    Best regards,
    Ismael

    November 14, 2022 at 5:55 pm #1372544
    AM-EventSolutions

    yes, the CSS before was 47:: Original
    #header_main .phone_number a p {
    font-size: 47px;

    Changed to 64. I also changed the
    #header_main .phone_number a {
    top: -10px;
    position: relative;
    }
    to
    #header_main .phone_number a {
    top: 10px;
    position: relative;
    }

    and no change reflecting.

    November 14, 2022 at 8:12 pm #1372570
    Mike

    Hi,
    Your css to change the font size to 64px had a space between 64 & px, so that it would not work, I removed the space.
    64 seems very large to me, please clear your browser cache and check and adjust to suit.

    Best regards,
    Mike

    December 6, 2022 at 5:41 pm #1375250
    AM-EventSolutions

    This has been resolved, thank you.

    We now want to change the color of the phone number when the menu is transparent to be white, then turn blue (#f8f8f8) when user scrolls.

    What would the CSS be to tell the site, when the header is transparent to make phone number white and when scrolled to make it blue?

    Thank you so much for all your help!

    December 7, 2022 at 1:39 pm #1375339
    Mike

    Hi,
    To change the phone number to white when the header is transparent please try this css:

    #top #header.av_header_transparency #header_main .phone_number a p {
	color: #f8f8f8;
}

    After applying the css, please clear your browser cache and check.
    The number will then show as blue when you scroll and the header is no longer transparent.

    Best regards,
    Mike

    December 7, 2022 at 8:07 pm #1375421
    AM-EventSolutions

    Hi,

    Thank you.

    it appears to be working on Firefox, but not Chrome, which is strange because the rest of the header seems to be fine.
    Any ideas on how to fix it?

    December 7, 2022 at 8:45 pm #1375437
    Mike

    Hi,
    Thanks for the link to your new page, I had tested on your old dev page, try using this css that has the color for both states, before and after scroll:

    #header_main .phone_number a {
    color: #6489df;
}
#top #header.av_header_transparency #header_main .phone_number a p {
	color: #f8f8f8;
}

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

    Best regards,
    Mike

    December 8, 2022 at 10:03 pm #1375603
    AM-EventSolutions

    Hi Mike.

    I just wanted to say thank you, first of all, for all your help on this.
    The code works now works on both firefox and chrome but not edge
    Frustrating that these browsers can’t all just figure out how to read the same code.
    On edge, it just stays white. Is there something we can add to it to tell edge to change it too?

    Also on mobile, it is just white and overlaps with the menu indicator.
    On mobile we just want it to remain as it was (if you look at any other page, including just .com (the real homepage, not the/home-2 we are working on) that is how it should look even when the transparent is selected for desktop.
    Is there a setting I need to check to keep mobile the same when I want desktop to be transparent?

    I am sorry for all the back and forth – and I TRULY LOVE enfold. I recommend it to all my clients and use it exclusively in redesigns.

    December 9, 2022 at 3:38 pm #1375694
    Mike

    Hi,
    Thanks for the feedback, I checked with Edge and Edge reads the css as having two colors:

    #header_main .phone_number a {
    color: #6489df;
    top: 28px;
    position: relative;
    color: #f8f8f8;
}

    2022-12-09_001.jpeg
    But I’m only finding the css as above on your site.
    So I checged the css to this:

    #top #header_main .phone_number a {
    color: #6489df;
}
#top #header.av_header_transparency #header_main .phone_number a {
        color: #f8f8f8;
}

    and cleared your WP Rocket cache and now it seems to work properly.
    For the mobile issue try this css:

    @media only screen and (max-width: 989px) { 
	#top #header.av_header_transparency #header_main .phone_number a p {
	color: #6489df !important;
}
#top #header.av_header_transparency #header_main .phone_number a {
    left: -65%;
    top: 18px;
}
}
@media only screen and (max-width: 450px) { 
	#top #header.av_header_transparency #header_main .phone_number a {
    left: -40%;
}
}

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

    Best regards,
    Mike

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