change background colour in scroll-down menu • Esotera How To Forum

Author

Posts
May 3rd, 2021 at 11:42 #117460

tina

Hey there!

I am facing issues with the menu bar when scrolling down on the landing page.

is there a way to disjoin the background colour of the menu-band when scrolling and the basic font colour of the main menu? i am having issues getting the right colours to make everything visually appealing and visible at the same time.

so what i would need is to have the main menu font colour AND the menu-band font colour when scrolling in white, but the background of the menu when scrolling in green.
for now – when i change the background colour, the menu itself changes to the same colour – which results in bad visibility of the menu when you see the starting page.i played around with the colours to make it work – unfortunately unsuccessfully. please tell me i can disjoin them somehow! *fingerscrossed*

side note: also, i read in another forum post that you cannot make the logo change in the scroll-menu.
BUT in the demo it changes from white (on pink) to pink (on white).

thank you for you help!
best, tina

May 3rd, 2021 at 21:55 #117506

Zed
Cryout Creations mastermind

Hi,

The background and/or text colors of the menu and menu items can be easily tweaked beyond the available configuration capabilities by applying some custom CSS.
However, the necessary CSS is case dependent and I’d need to browse your site to see what’s less than optimum and needs tweaking.

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

May 4th, 2021 at 13:17 #117540

tina

This reply is private.

May 4th, 2021 at 13:22 #117541

tina

Also, is there a setting to have the font colour of some of the widget headings/texts in a different colour as the standard-settings. i guess there would also be a custom CSS needed?

Thanks!

best,
martina

May 5th, 2021 at 13:20 #117610
Zed
Cryout Creations mastermind
The following CSS will make the menu bar background green on scroll:
```
body.esotera-over-menu .site-header-bottom.header-fixed .site-header-bottom-fixed {
    background-color: #018e66;
}
```
Widgets normally inherit their colors from the general text. To customize them separately use:
```
.widget-container {
    color: #123;
}
```
To further control widget titles separately, also add:
```
.widget-title {
    color: #456;
}
```
If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.
May 6th, 2021 at 17:41 #117657

tina

Hello Zed!

Perfekt, thank you!
I changed the background of the menu – yay!

Regarding the widget – the code you sent is changing only the footer widget of the landing page.

However, I am trying to adapt the colours of some of the Landing Page “tools” – like the Text Areas’ headings or the heading of the Jetpack Testimonials. Or also the Featured Boxes heading – etc. I would like to have them white for better visibility. Hoping for your help, again.

Thank you very much for your help in advance!! 🙂
Cheers, Tina

May 8th, 2021 at 10:58 #117702
Zed
Cryout Creations mastermind
As you’re mixing light and dark background for the landing page sections, there’s no general CSS solution. You can try:
```
.home .lp-text, .home .lp-section-title {
    color: #fff;
}
```
but for best results you’ll probably need to tweak the text colors for each section individually:
```
#lp-blocks1, #lp-blocks2
#lp-boxes-1, #lp-boxes-2, #lp-boxes-3
#lp-text-zero, #lp-text-one, #lp-text-two, #lp-text-three, #lp-text-four, #lp-text-five, #lp-text-six
#lp-portfolio
#lp-testimonials
#lp-page or #lp-posts
```
If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘change background colour in scroll-down menu’ is closed to new replies.