Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 18, 2023 at 9:47 am #1422875
    frb1

    Hi Kriesi,

    Right now I have a normal black on white header and a transparant header with white on transparant. I’d like a third option; A transparant header with black menu and social bookmarks menu. Same menu position, mobile menu etc. How can do that?

    BR Frederik

    October 19, 2023 at 10:27 am #1422975
    Ismael

    Hey frb1,

    Thank you for the inquiry.

    You can use this css code to adjust the style of the menu in a transparent header.

    #top #wrap_all .header_color.av_header_transparency, #top #wrap_all .header_color.av_header_transparency .phone-info.with_nav span, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-subtext {
    color: #000000;
}

    Best regards,
    Ismael

    October 19, 2023 at 10:36 am #1422979
    frb1

    Hi Ismael,

    Thank you for your reply.

    But I do not need to adjust the style of the transparent header. I need a third option for the header. Or a “second” transparent header, but this one only with black text. So I have three header options for each page under “Header visibility and transparency” options.

    CAN I fx. adjust the “Transparant & glassy header” just to look like the “transparant header”, but with black text?

    Hope it makes sense :)

    October 19, 2023 at 10:44 am #1422982
    Ismael

    Hi,

    CAN I fx. adjust the “Transparant & glassy header” just to look like the “transparant header”, but with black text?

    Yes, that should be possible. Please try this css code instead. 

    #top .av_header_glassy.av_header_transparency #header_main {
    border-color: transparent;
    border-top-color: transparent;
}

#top .av_header_glassy.av_header_transparency .header_bg {
    background-color: transparent;
    opacity: 0;
}

#top #wrap_all .header_color.av_header_transparency, #top #wrap_all .header_color.av_header_transparency .phone-info.with_nav span, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-subtext {
    color: #000000;
}

    Best regards,
    Ismael

    October 19, 2023 at 11:11 am #1422988
    frb1

    Thanks for the fast reply.
    This code seems to change the look of the transparent header ass well

    Can I add code that adjusts the social bookmarks to black and uses another logo (the black version) as well? I guess it still inherits the social bookmarks color and logo from “transparant header” :)

    • This reply was modified 6 months, 2 weeks ago by frb1.
    • This reply was modified 6 months, 2 weeks ago by frb1.
    October 20, 2023 at 8:57 am #1423081
    Ismael

    Hi,

    Thanks for the update.

    The css modification above should only affect pages with glassy headers. To adjust the color of the social icons and show the black logo, try to add this modification.

    #top .av_header_glassy.av_header_transparency .social_bookmarks li, #top .av_header_glassy.av_header_transparency .social_bookmarks li a {
    border-color: rgba(255,255,255,0.25);
    color: #000;
}

.av_header_glassy.av_header_transparency .logo img.alternate, .av_header_glassy.av_header_transparency .logo .subtext.avia-svg-logo-sub svg {
    opacity: 0;
}

#top .av_header_glassy.av_header_transparency.av_alternate_logo_active .logo a > img, #top .av_header_glassy.av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 1;
    filter: alpha(opacity=100);
}

    Best regards,
    Ismael

    October 23, 2023 at 4:15 pm #1423429
    frb1

    Hi Ismael and thankyou. Somehow it affects my transparant headers as well – making the links black on them as well….

    BR,
    Frederik

    October 24, 2023 at 2:44 am #1423485
    Ismael

    Hi,

    We might have found the issue. Please look for this css rule:

    #top #wrap_all .header_color.av_header_transparency, #top #wrap_all .header_color.av_header_transparency .phone-info.with_nav span, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text, #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-subtext {
    color: #000000;
}

    Replace it with:

    #top #wrap_all .header_color.av_header_transparency.av_header_glassy, #top #wrap_all .header_color.av_header_transparency.av_header_glassy .phone-info.with_nav span, #top #header.header_color.av_header_transparency.av_header_glassy .av-main-nav > li > a .avia-menu-text, #top #header.header_color.av_header_transparency.av_header_glassy  .av-main-nav > li > a .avia-menu-subtext {
    color: #000000;
}

    Best regards,
    Ismael

    October 24, 2023 at 10:03 am #1423529
    frb1

    Ismael, the genius white baby seal… you’re the best. Really thankfull for this support from all of you.

    The only thing I’m missing now is the blackening of the search icon hover state. I’m trying to figure it out, but if you should have a quick solution in mind, don’t hesitate to write :)

    October 25, 2023 at 4:59 am #1423635
    Ismael

    Hi,

    The only thing I’m missing now is the blackening of the search icon hover state.

    The initial color of the search icon is black and turns white on hover. Would you mind providing a screenshot of the search icon? If you’d like to change the hover style of the search icon, try this code.

    #top #menu-item-search:hover>a {
    background: transparent;
    color: inherit;
}

    I’m pleased that the white baby seal (not exactly a genius) could be of help! ;D

    Best regards,
    Ismael

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