Different opacity for main menu and submenu

Hi,

I need to set another opacity value to the background of the submenu. Mega Menu is style „vertical lines“ This is the code I've inserted

/* Header transparent */
#Top_bar .top_bar_left {
    background-color: #ffffff;
    opacity: .8;
}

/* Sub Menu less transparent */
#Top_bar .top_bar_left ul.sub-menu {
    opacity: 1 !important;
}

The debugger says that opacity of ul.sub-menu is 1.0 but the element is transparent (80%) on the screen…


Comments

  • Hi,
    Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
    It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
    thanks
  • Hi, I sent you 2 screenshots to understand. It's a beta website, how can I send you link in a hidden way?
  • I cannot make a CSS modifications when I do not see website.
    A lot of users have his modifications, which can interrupt basic CSS code, so I have to visit it.

    You'll delete a link to the website when css modification will be successfully.
    It's okay?

    Cheers.


  • edited September 2018
    xxx
  • It this okay?
    /* Header transparent */
    #Top_bar .top_bar_left {
    background-color: rgba(255,255,255,0.2) !important;
    }

    /* Sub Menu less transparent */
    #Top_bar .top_bar_left ul.sub-menu {
    background-color: rgba(255,255,255,1) !important;
    }

    This last parameter in bg-color is an opacity
    amount: http://prntscr.com/ktf8e8



    Cheers
  • edited September 2018
    Hi, thank you for the infos.

    Unfortunately I have still 3 issues:
    - now logo has not the same opacity as menu background (before I set all .top_bar_left to opacity .8), I tried to change the opacity of div.logo or img.logo-main, but it did not work). I have no png logo
    – adding this background-color I see this background (double background) also on sticky menu #Top_bar .top_bar_left
    - opacity of submenu is good, but still not 100% (you see a little bit of what is under submenu area)


  • 1) It will be not possible to change opacity of image through CSS or other theme options.
    You have to delete it with some graphic program.

    2) Check if there is no transparent option turned on in Theme Options > Global > General
    Also, please paste this CSS code into Theme Options > Custom CSS & JS > CSS

    #Top_bar.is-sticky{
    opacity:1 !important;
    }
    Thanks
  • Hi,

    2) there are no transpartent options turned on. How can I remove this double background?
    3) code works, thank you
  • I do not understand your question. first (2)
    You have to delete a background in image.
    Just download this logo and delete white background of this by graphic program or online tools.

    Thanks
Sign In or Register to comment.