Important notice: we will respond to all open ticket requests up until November the 1st. After this date, we will be unable to process the ticket requests here on Ticksy.

Okay
  Public Ticket #801570
Menu Appearance
Closed

Comments

  •  5
    Tam started the conversation

    Hi there — 

    Is it possible (and how) to adjust the font and background colors in the main menu dropdowns? (attached for reference: I'd like to change the background from dark to light)

    In the Elated Options area I can only find appearance on how it shows up. (attached for reference on what I see in my menu screen)

    Thank you!!

  •  5
    Tam replied

    Also, if I could also ask in the same vein... 

    Is it possible (and how) to adjust the colours for the footer? I'd also like to change it from dark to light. 

    Thanks again!

  •  13
    Kevin replied

    Hey Tam,

    If you know anything about CSS you can easily change the background color using this code. I'm just a user but this is what I wrote to change it on my website. This will change the Menu, Top Bar, and User Drop down to a lighter color. Note: The colors are meant for my design you can can simply just change the Hex and RGB colors to your personal choice. 

    /*************** Menu and Dropdown Light **************/

    .eltd-drop-down .narrow .second .inner ul, .eltd-drop-down .second .inner>ul {
       display: inline-block;
       position: relative;
       background-color: rgba(255,255,255,0.92)!important;
       border: 1px solid #d6d6d6!important;
       border-top: none!important;
       box-shadow: 0px 0px 1px #d6d6d6
    }
    .eltd-drop-down .second .inner ul li a, .eltd-drop-down .second .inner ul li h4 {
       display: block;
       color: #888888!important;
       font-size: 13px!important;
       line-height: 32px!important;
    }
    .eltd-drop-down .second .inner ul li a:hover, .eltd-drop-down .second .inner ul li h4:hover {
       display: block;
       color: #00afef!important;
    }
    .eltd-header-standard:not(.post-type-archive-listing-item) .eltd-page-header .eltd-menu-area {
       background-color: rgba(255, 255, 255, 0.9);
       border-bottom: 1px solid #d6d6d6!important;
    }
    .eltd-page-header .eltd-sticky-header .eltd-sticky-holder {
       background-color: rgba(255, 255, 255, 0.9);
       border-bottom: 1px solid #d6d6d6!important;
       box-shadow: 0px 0px 1px #d6d6d6;
    }
    .eltd-login-register-widget .eltd-login-dropdown {
       background-color: rgba(255,255,255,.9)!important;
    }
    .eltd-login-register-widget .eltd-login-dropdown li a {
       color: #888888!important;
    }
    .eltd-login-register-widget .eltd-login-dropdown li a:hover {
       color: #00afef!important;
    }
    .eltd-top-bar #lang_sel ul ul {
       background-color: rgba(255,255,255,.9)!important;
    }
    .eltd-top-bar #lang_sel ul ul a {
       color: #888888!important;
    }
    .eltd-top-bar #lang_sel ul ul a:hover {
       color: #00afef!important;
    }


    I'm not sure what you mean by the lighter footer though as the text and elements should already be lighter. 
    Anyways, hope that helped!

  •  5
    Tam replied

    Thanks so much Kevin! I really appreciate the hack — I will give it a shot!!

    Re: the footer — yes, the icons and search button etc are light but the background is dark grey and black (like the header drop downs). I'd love to lighten them up with custom colours!


  •  13
    Kevin replied

    Your welcome Tam!

    I think I know what you mean by the footer now.
    I would recommend uploading a night bright image as the background for the footer which you can do at Elated Options > Footer > Footer Background Image

    Than to change the bottom bar overlay color and text you can use this custom CSS code

    Background color will change the bar color and color will change the font color

    .eltd-footer-bottom-holder {

        background-color: rgba(255,255,255,.5)!important;
        color: #f8f8f8!important;
    }

  •  5
    Tam replied

    Thanks so much, Kevin — this is so appreciated :D 

    One last quick quick question, if I can — I'm sorry! Should I copy the code you provided into the 'custom css' box in the Elated Options (what I've screenshotted), or right into the css file (and if the latter, is there any existing code in there I need to find and replace with below)? 

    Thanks again!!! 

  •  13
    Kevin replied

    You can do that but the best practice to get into is to actually download the Child Theme and activate that instead of the main theme. This allows you to add custom coding to the style.css and it wont get erased when you update the theme in the future. 

    If you have the child theme activate simple go to Appearance > Editor
    From there you can just copy and paste and save. 

    I attached a screenshot to give you a visual of that I'm talking about

  •  5
    Tam replied

    Thank you so much, Kevin! I really appreciate your time and patience on this!

    ( I'm sorry for my late reply; I was away from my desk unexpectedly for a few days :/ ) 

  •  13
    Kevin replied

    No problem Tam! Hope you were able to figure it out and had a great weekend!

  •  1,845
    Elated replied

    Hi,

    Glad that you were able to solve it!

    Let is know if there is anything else we can do for you, thanks!


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.