Sticky Menu - change color as you scroll

Sydney
#1

Hi there,
I used the following code from the post (Sydney Thema Sticky Menu is missing in Mobile and Tablet Mode) here.

#masthead.site-header.fixed {
    position: fixed !important;
    background-color: rgba(0,0,0,0.9);
}

@media (max-width: 767px) {
    .site-logo {
        display: none;
    }

    .btn-menu {
        margin-top: -20px;
    }

    body.home #masthead:not(.float-header) .site-logo {
        display: inline;
    }

    body.home #masthead:not(.float-header) .btn-menu {
        margin-top: 15px;
    }
}

The code works so far, but the background color of the menu usually changes when scrolling. Unfortunately, this is canceled by the code. The URL to the sitte is www.braun-ms.de.

What do I have to change in the code so that I also have the color change of the background when scrolling in the Sticky Menu?

Thanks in advance.

#2

Hi,

You can use this CSS code:

    #masthead.site-header.float-header {
      background-color: rgba(38,50,70,.9);
    }

The color format is RGB with alpha (opacity) value 90%. To get your own RGBA color, yoou can use this tool: http://www.menucool[DOT]com/rgba-color-picker.

To use a solid color, use this format:

    #masthead.site-header.float-header {
      background-color: #ff0000;
    }

I hope this reply helps.

Regards,
Kharis
aThemes Support

#3

Hi,

thx, that’s working.

I got two more little probs.

How can I change the color of the menu? It’s black at the moment but it should have the same color ```
rgba(38,50,70,.9). Please see: https://gyazo.com/3025a81b6b9b50ffce83dd12d20a68d4 and the backend settings https://gyazo.com/440d488bf73d76399ae7531df2e1490d.

Also I don’t see the logo anymore, so the user can’t get back to the “Home” screen. Is there any change to get it back or have it a little smaller in the sticky menu?

Thx for your support.

#4

Try adding this CSS code:

    #mainnav-mobi {
      background-color: rgba(38,50,70,.9);
    }

As checked with my phone, the logo is appearing. Seems likely you have been able to rectify the issue?

Regards,
Kharis
aThemes Support

#5

Thx, the code for the navmenu is working. Great Su

The logo only appears on the startpage. Please click on a link in the menu, the it disappears. Here is a video: https://gyazo.com/7ca017c876e61efea93b2d1b38599eae.

#6

Hi @kharisblank,

any ideas? Tthe problem with the logo is still existing…

Hope to read from you soon.

Best regards.

#7

Hi,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {

      .site-header.float-header .site-logo {
        display: inline !important;
      }

      .site-header.float-header {
        padding: 20px 0;
      }
      
    }

I hope that helps.

Regards,
Kharis
aThemes Support

#8

The logos appears on the startpage, but on other sites only when I’m scrolling. I’ve deactivated the code right now. I want it like the behaviour on the startpage.

The logo should be there from the start on every page, and when I’m scrolling down it should disappear. Please see my video: https://gyazo.com/d87c7013d2828804dd5ed0912ab035a6

Du you understand what I mean?

#9

Can you share a link to your other website, so I can check it directly?

Regards,
Kharis
aThemes Support

#10

Shure, there you go.

Startpage: https://www.braun-ms.de
Other sites: https://www.braun-ms.de/seo-optimerung-texterstellung/ or https://www.braun-ms.de/arbeiten-referenzen/

#11

Hi,

Thank you for sharing the links.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      body:not(.home) .site-header .site-logo {
        display: inline;
      }

      body:not(.home) .site-header.float-header .site-logo {
        display: none;
      }  
    }

Regards,
Kharis
aThemes Support

#12

No probem, thanks for the code.

Almost there! Please compare the start page with a subpage again, now the logo is displayed, but the distance to the menu is different than the one on the start page, which is why the menu goes into the logo or covers it. In addition, the scrolling behavior is different than on the start page. The menu collapses here abruptly.

#13

Hi,

Try adding this code:

    @media only screen and (max-width: 1024px) {
      body:not(.home) #masthead:not(.float-header) .btn-menu {
        margin-top: 15px !important;
      }
    }

Regards,
Kharis
aThemes Support

#14

Hi,

thank you, it seems to work :slight_smile:

Great support!

Have a nice day.

#15

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support