Different opacity for main menu and submenu

waldemarker · September 2018

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…

http://prntscr.com/kstqrl

http://prntscr.com/kstr9x

Pablo · September 2018

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

waldemarker · September 2018

Hi, I sent you 2 screenshots to understand. It's a beta website, how can I send you link in a hidden way?

Pablo · September 2018

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.

waldemarker · September 2018

xxx

Pablo · September 2018

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

waldemarker · 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)

http://prntscr.com/kti693

https://prnt.sc/kti8wj

http://prntscr.com/kti9dy

Pablo · September 2018

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

http://prntscr.com/kti8rn

Also, please paste this CSS code into Theme Options > Custom CSS & JS > CSS

#Top_bar.is-sticky{
	opacity:1 !important;
}

Thanks

waldemarker · September 2018

Hi,

2) there are no transpartent options turned on. How can I remove this double background?

3) code works, thank you

Pablo · September 2018

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

Different opacity for main menu and submenu

Comments