Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Our nonprofit organization has been using your premium theme for several months now and find it well built and user-friendly. A job well done, Team SiteOrigin!
First, we would like to change the menu bar (color #0066bf) to be completely transparent
Second, we’d like to set the menu text (color #ffffff) and the menu logo to be completely opaque.
Third, we would like to flush or fix the Image Slider to the top of the page so that the menu bar is on top of the Image Slider.
Thank you for your prompt response and support.
Hi Andy
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.
Thanks
Magus
This is a private message.
Hi Andy
Please add the following to Appearance->Custom CSS
.main-navigation { background-color: transparent; z-index: 99; box-shadow: none !important; } #masthead { height: 0px; }You may want to change the colour of the menu font so it displays correctly against the white site background or disable the sticky menu option under Appearance->Theme Settings->Navigation.
Let us know how you get on
Magus
Thanks for the reply but the code does not function with a transparent background. However, the “box-shadow: none !important;” works. Thank you. Any other thoughts on how we can get this to work?
Hi Andy
This code works for me in local testing. Could you please re-add the code and I will have a look and see what is stopping it.
Magus
I have copied all the code into Custom CSS with no other code present or active in the Custom CSS box. Please note that currently as you read this, the Sticky Menu is enabled. However, even if I disable the Sticky Menu, the menu bar is not transparent. Thoughts?
Hi Andy
Please change the first part of the snippet to read
.main-navigation { background-color: transparent !important; z-index: 99; box-shadow: none !important; }Magus
Magus, that latter code fixed the transparent background. Thank you. Now, how would I be able to do the same for the search icon and the submenus?
Hi Andy
To get the rest transparent with only text colour change on hover please add the following to your CSS
#search-icon #search-icon-icon { background-color: transparent !important; } .main-navigation ul ul { background-color: transparent !important; } .main-navigation ul li:hover > a { background-color: transparent !important; }Let us know how you get on
Magus
This is a private message.
Hi Andy
Hi Andy
Unfortunately that won’t be possible without heavy customization of the theme, including extra scripts for the head section, new classes for the menu templates and more custom CSS. The functions on the site you linked are built into the theme.
I have looked to see if there are any menu plugins to give you this or a similar effect but cannot find any.
This is beyond the scope of what we can help you with on the forums, but you could hire a developer to implement this for you.
We highly recommend using https://codeable.io/.
Magus
This is a private message.
Hi Andy
Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.
https://siteorigin.com/about/forum-thread-prioritization/
Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.
Yes, please help me with the previous request above. Thank you.
Also, in the video Page: Getting Started there is a way to change every font size, type, color, etc.. I imagine that this feature is incredibly useful. However, I am unable to get this feature working on Firefox. The inspector is not functioning as it should be. Thoughts? Must I use Chrome? Safari? Edge?
Thanks so much for helping us.
Hi.
Recommend removing this rule for now:
header#masthead.masthead-logo-in-menu .logo { margin-top: -9px; margin-bottom: -15px; margin-left: 0px; margin-right: 0px; }And inserting this new rule:
#masthead.masthead-logo-in-menu .logo { padding-top: 0 !important; padding-bottom: 0 !important; }Then at Appearance > Customize > Theme Design > Menu change menu padding from 26 to 28. Start with that.
Just wanted to say thanks, and, yes, the code above is working well!
Sweet :)