Tagged: 

Viewing 30 posts - 1 through 30 (of 33 total)
1 2
  • Author
    Posts
  • May 10, 2023 at 4:04 pm #1407005
    Stilecatalini

    Hello guys! I’m trying to obtain my submenu (after click my burger) with some effect like opacity. Now is total black (not transparent).
    Again, I would like to add some effect to do appear my button list….
    Please see my site and my example site..

    May 11, 2023 at 7:47 am #1407082
    Ismael

    Hey Stilecatalini,

    Thank you for the inquiry.

    Adding the following css code should apply transparency to the mobile menu container.

    #top #wrap_all .av-burger-overlay-scroll {
    background-color: #000000c7;
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

    Best regards,
    Ismael

    May 11, 2023 at 5:20 pm #1407132
    Stilecatalini

    Don’t work. I want some transparence in the box that appear after click the burger. Understand. I don’t know the exact name; toggle? Submenu? Please look at my site examples….

    May 14, 2023 at 12:20 am #1407328
    Mike

    Hi,
    To add some transparency to your burger menu try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #wrap_all .av-burger-overlay-scroll {
    background-color: rgb(28 28 28 / 60%);
}

    After applying the css, please clear your browser cache and check.
    Please see the screenshot in the Private Content area of the expected results.

    Best regards,
    Mike

    May 14, 2023 at 12:00 pm #1407346
    Stilecatalini

    No. Doesn’t work; no on desktop, no on mobile.

    May 14, 2023 at 12:18 pm #1407354
    Stilecatalini

    Please try to entry in my wordpress… (remember that it should works both on desktop and mobile version).

    May 14, 2023 at 7:40 pm #1407371
    Mike

    Hi,
    Thanks for the feedback, but the password to your site doesn’t work, please check.
    Is the transparency in the burger menu in the screenshot that I posted the way you would like it?

    Best regards,
    Mike

    May 14, 2023 at 10:12 pm #1407374
    Stilecatalini

    Sorry. I got the password wrong. Please try now..

    May 14, 2023 at 10:21 pm #1407377
    Stilecatalini

    The transparency is ok but i would some blurry and some effect:
    -after click, the menu drop down from above, as if the already existing bar collapsed down. The menu items that come from right to left, from the first to the last.
    Please check this website example.
    Again, please check also the header (MOBILE VERSION), the blurry effect is visible also when you open the website: not correct. It should be appear after scrolling down. Please check the desktop version were it works well.

    May 16, 2023 at 5:48 am #1407507
    Nikko

    Hi Stilecatalini,

    Thanks for giving us admin access.
    I have added this CSS code in Enfold Theme Options > General Styling > Quick CSS:

    #top #wrap_all #header_main .av-burger-overlay-scroll {
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    background: rgba(0,0,0,0.15);
}

    Please review your site.

    Best regards,
    Nikko

    May 16, 2023 at 2:01 pm #1407615
    Stilecatalini

    Hello Nikki! Well! Now I would obtain the blurry effect of the header only after scrolling down; like the transparency. If you look at the header now, it is blurry also when you open the website, so when the page is all up.

    May 16, 2023 at 2:11 pm #1407619
    Nikko

    Hi Stilecatalini,

    I’m not sure I understand what you’re trying to achieve, can you give us more context? or maybe provide us with some screenshots, just upload it in savvyify, imgur, dropbox or googledrive and post the link here (or in private content).

    Best regards,
    Nikko

    May 16, 2023 at 2:48 pm #1407622
    Stilecatalini

    Ok. I’m trying to explain better.
    Open the website.
    Look at the header. It’s fully transparent. Ok?
    Now look at the blurry effect; it’s already visible.
    Ok. I want that it’s hide. I mean, like the transparency, it start to be visible after scrolling down. Like the transparency.

    May 16, 2023 at 2:56 pm #1407624
    Nikko

    Hi Stilecatalini,

    I see, please try to add this CSS code as well:

    #top #wrap_all .av_header_transparency #header_main .av-burger-overlay-scroll {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #1c1c1c;
}

    Best regards,
    Nikko

    May 16, 2023 at 3:43 pm #1407631
    Stilecatalini

    Just tried but didn’t work.
    Please try you..

    May 16, 2023 at 9:28 pm #1407661
    Stilecatalini

    There is another error. Try to click the burger when the page is all up: the submenu is black and not transparent.

    May 16, 2023 at 10:33 pm #1407670
    Stilecatalini

    Sorry. It’s ok! Now miss only about blurry effect when the page is up. Please try you,, Thanks

    May 17, 2023 at 3:55 am #1407684
    Nikko

    Hi Stilecatalini,

    When you said “when the page is up”, do you mean the overlay is shown when the burger menu is clicked?

    Best regards,
    Nikko

    May 17, 2023 at 9:36 am #1407718
    Stilecatalini

    No. Just opened the website you should see nothing, only the logo and the burger. So not blur.

    May 17, 2023 at 9:44 am #1407721
    Stilecatalini

    I’m talking about the only mobile version!
    On the desktop it’s ok!

    May 17, 2023 at 10:41 am #1407728
    Nikko

    Hi Stilecatalini,

    This is what I see on mobile (screenshot link in private content).

    Best regards,
    Nikko

    May 17, 2023 at 10:56 am #1407732
    Stilecatalini

    I don’t know how can i send you an image here. Anyway form me is not like you. I see the header blur.

    May 17, 2023 at 11:25 am #1407734
    Nikko

    Hi Stilecatalini,

    You can upload it in savvyify, imgur, dropbox or googledrive and post the link here (or in private content).
    Best regards,
    Nikko

    May 17, 2023 at 11:34 am #1407736
    Stilecatalini

    Look!

    May 18, 2023 at 4:31 am #1407793
    Nikko

    Hi Stilecatalini,

    Thanks, that blur is caused by these codes:

    #top #header .header_bg {
    background-color: rgba(20, 21, 23, 0.3);
    backdrop-filter: blur(15px);
}

    and this code inside @media only screen and (max-width: 767px):

    #header.header_color > .header_bg {
    background-color: rgba(20, 21, 23, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

    Best regards,
    Nikko

    May 18, 2023 at 9:42 am #1407806
    Stilecatalini

    Did you solve it now? In my phone doesn’t work.

    May 18, 2023 at 9:47 am #1407807
    Stilecatalini

    Are the others moderators disappeared?!
    I should solve other problems! The question about edit my theme to obtain the popup light box and the curtain eff te of the footer. I’m not joking..

    May 18, 2023 at 10:06 am #1407810
    Stilecatalini

    So how can I solve?! Those codes was to blur on mobile. Tell me..

    May 18, 2023 at 10:48 am #1407813
    Nikko

    Hi Stilecatalini,

    Please remove this code inside @media only screen and (max-width: 767px):

    #header.header_color > .header_bg {
    background-color: rgba(20, 21, 23, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

    Then replace this code:

    #top #header .header_bg {
background-color: rgba(20, 21, 23, 0.3);
backdrop-filter: blur(15px);
}

    with:

    @media only screen and (min-width:1080px) {
  #top #header .header_bg {
    background-color: rgba(20, 21, 23, 0.3);
    backdrop-filter: blur(15px);
  }
}

    Best regards,
    Nikko

    • This reply was modified 1 year, 6 months ago by Nikko.
    May 18, 2023 at 10:55 am #1407816
    Stilecatalini

    Ok! Please help me also to fix the others..

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 33 total)
1 2
  • The topic ‘Toggle burger menu (sub) opacity’ is closed to new replies.