Hello,
Thanks so much for all the great advice and lines of custom CSS that you give on this support forum. It has helped me so much.
I am trying to make my menu bar completely transparent, and tried the css mentioned here: https://siteorigin.com/thread/transparent-menu-bar/
When I apply it, though, the WORDS on the menu bar become semi-transparent, but the bar itself stays the same. I would like to achieve the opposite effect, so the words aren’t changed at all.
My site is not online yet, but I would be happy to give access codes if someone would like to take a look.
Thanks again for your time and great advice!
Hi Kmj
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
.main-navigation { background-color: rgba(52,53,56,0.5) !important; }You will need to adjust the rgba setting to match what you require. The first three numbers are the rgb colour code and the fourth the opacity value. More information here
http://www.w3schools.com/tags/ref_colorpicker.asp
Let us know how you get on
Magus
Thank you Magus,
However that did not seem to make any difference… I enabled the sticky menu to see if that would change something, and it did, but not to the desired effect. With the sticky menu enabled, the menu bar is solid until it becomes sticky (at which point it becomes transparent). However, the colour behind the drop down menus is still fully opaque, even if selected while scrolling.
If possible, I would like to keep the menu bar fixed and not sticky but have it (and the drop down menus) transparent at all times.
Perhaps I have some other custom CSS that is “overriding” this line of code? I confess to shamelessly copy/pasting the code I need but don’t understand a lick of it.
I would be happy to send access codes if you would like to check it out?
Thanks in advance!
Hi Kmj
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Or you could create a temporary admin account for us so we can log in and take a look. You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Thanks
Magus
This is a private message.
Hello and thanks again. I’ve sent the login info.
Best regards
Hi kmj
Im on at the moment. Do you still want the hover effect for the menus or will that be transparent too.
Magus
Thanks Magus,
I would really like the words to change colour when you hover over them, without the dark boxes behind them (sorry I don’t know exactly what the hover effect refers to (!)
Hi Kmj
This was not working because you had set custom background colours to the menu in Appearance->Customize. I reset those colours to default and have changed my Custom CSS to
.main-navigation,.main-navigation ul ul,.main-navigation ul li:hover > a { background-color: rgba(51,51,51,0) !important; box-shadow: none !important; }This removes all colour and hover effects from the menus. I have also disabled 2 plugins. Simple CSS (not needed)and Menubar (potential conflict).
You will need to go in and adjust the menu text colours in customize to give you better definition against the page text.
Let us know how you get on
Magus
Thank you very much Magus.
That’s just near perfect, except for one “detail” I would like to change if possible: Now the menu bar is white, but not transparent. I would like to make it transparent so that the image shows through, like this, for example: http://www.morningsidemontessori.org/
Hi kmj
Take a look now and see what you think.
I have enabled the mobile menu and wrapped all the custom code we have added in a media query to keep it looking good when responsive.
Magus
Thanks so much Magus!
Looks brilliant.
Excellent. You may remove the temporary account now.
I will mark this as resolved. If you need any more help please feel free to open a new support thread.
Magus
Oops!
Before you do, I tried to insert my logo in the menu and it is floating on top (?) It does seem to me that the menu has been lowered- is it possible to put it at the top with the logo please? Sorry about that!
Hi kjm
All done
Magus
This is a private message.
Hi kmj
I have moved the menu back to the centre of the page and it is laying at the top of the screen.
If it is still showing as out of line for you please try clearing your browser cache.
Magus
Hello!
It is in the centre (looks great!) but I honestly still see the logo above the menu :(
I am sorry this sounds so daft…
I cleared my browser cache, with no change. Then tried with firefox instead of chrome, but still no change. Tried on the pc, no luck either. It just looks as if the logo is in the white space, which is now transparent, of course, ( the masthead?) just above the menu. Or maybe I’m just missing something to see clearly!!! Sorry…
Hi kjm
Please check it now.
Magus
THANK YOU! Perfect! Resolved.