This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Menu – Set background to 0% opacity | Set text and logo to 100% opacity | Flush Image Slider to top with menu overlay

Resolved 17 replies premiumthemetheme-vantage
Andy
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

17
  1. Magus Staff 10 years, 7 months ago

    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

  2. Andy Private 10 years, 7 months ago

    This is a private message.

  3. Magus Staff 10 years, 7 months ago

    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

  4. Andy 10 years, 7 months ago

    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?

  5. Magus Staff 10 years, 7 months ago

    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

  6. Andy 10 years, 7 months ago

    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?

  7. Magus Staff 10 years, 7 months ago

    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

  8. Andy 10 years, 7 months ago

    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?

  9. Magus Staff 10 years, 7 months ago

    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

  10. Andy Private 10 years, 7 months ago

    This is a private message.

  11. Magus Staff 10 years, 7 months ago

    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

  12. Andy Private 10 years, 4 months ago

    This is a private message.

  13. Andrew Misplon Staff 10 years, 3 months ago

    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.

  14. Andy 10 years, 3 months ago

    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.

  15. Andrew Misplon Staff 10 years, 3 months ago

    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.

  16. Andy 10 years, 2 months ago

    Just wanted to say thanks, and, yes, the code above is working well!

  17. Andrew Misplon Staff 10 years, 2 months ago

    Sweet :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread