change background colour in scroll-down menu

  • Author
    Posts
  • #117460

    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

    #117506
    Zed
    Cryout Creations Team

    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 read the available documentation and search the forums before posting.
    #117540
    This reply is private.
    #117541

    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

    #117610
    Zed
    Cryout Creations Team

    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 read the available documentation and search the forums before posting.
    #117657

    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

    #117702
    Zed
    Cryout Creations Team

    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 read the available documentation and search the forums before posting.
Viewing 7 posts - 1 through 7 (of 7 total)

You need to log in to reply to this topic.