Top menu Color change!

Hi everyone. Sorry if this was already asked before, but i could not find anything myself.

So, i am building a website using Airi + Elementor and everything is looking good so far, but the main menu, of the top menu type, is giving me trouble. I just cant find where in the CSS to edit it. I know it is #masthead, but where do i find this?! I looked everywhere and nothing.
I have tryed editing all sorts of things on the CSS in the hopes it would affect my top menu, but without any lucky…
So…

My menu on the top of the page have a transparent background, and, when i scroll down the menu background turns black.

I need to have some control over that, to study what will turn out better. All white menu, or, transparent on the top and white on scroll down. All transparent. Etc.

I hope i have explained myself in a way you guys can help me.

Thank you so much!

Hello there,

You can use this CSS code to manage the color when on normal state:

    .menuStyle1 .site .sticky-wrapper .site-header {
      background-color: #fff000 !important;
    }

When on scroll state, you can use this CSS code:

    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header {
      background-color: #ff0000 !important;
    }

This code will only work when “Basic 1 - inside header” menu type is active.

Regards,
Kharis
aThemes Support

Hi Kharis, thank you for your reply!

I have added those codes to the main styles.css and nothing happened. If it is not too much, can you help me identify what i am doing wrong? Should i add it to the main styles.css?

The page i am trying to edit is this one:

http://plantaosorriso.org.br/index.php/home-3/

I added your code and it still the same.

Thank you!

Hello there,

Please do not touch the main stylesheet of the theme as it will be overridden with the latest one when you perform theme update in the future. Please add the code to Appearance > Customize > Additional CSS from dashboard. Flush any active site caching if applied before reloading your site.

Regards,
Kharis
aThemes Support

Hey, it worked! Thank you!

Hi again :rofl: now i am trying to switch the font color. I tryed adding a color paramter in the code but nothing happened. This is what i done:

The original code i found there in this forum and it works fine, just added the color thing in the end.
I know this is pretty newbie stuff, but i am still learning CSS.

Thanks!

Perhaps the original code of the theme on the menu color has higher specificity level. Try adding !important and see if it works.

 @media only screen and (min-width: 1200px) {
  .main-navigation a {
    font-size: 18px;
    font-family: "Roboto", Sans-serif;
     color: #fff000 !important; 
  }
}

Regards,
Kharis
aThemes Support

Hey there!
Thanks a lot, It actually worked for me. I was trying to figure this out for my client’s project. You gotta save my time…Thanks
Regards.!