1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

style the 'search element' in global header

Discussion in 'Free Divi Community Forum' started by Rogier The20, Oct 14, 2020.

  1. Rogier The20

    Rogier The20 New Member

    Dear all,

    I have made a global header for my website via the Theme builder. There is just one thing that I can't seem to edit which is the search element in the global header which is integrated into the menu module.

    When I click the search icon in the menu it shows a placeholder text saying 'search'. The problem here is that the placeholder text is way too big and in a different font which doesn't complement the rest of the website design.

    Is there any way to edit this with CCS or any other way? I would like the placeholder text to be smaller and in the Roboto Mono font which is a Divi font.

    Please find some screenshots attached as well as a link to the website.

    https://divergeculture.com/207837-2/?v=796834e7a283

    Any help is highly appreciated, thank you very much!
     

    Attached Files:

    1. AD Power up your Divi sites with tons of new functionalities: https://divipowerful.divi.help/
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .et_pb_menu__search-input {
        font-family: 'Roboto Mono',monospace;
        font-size: 14px!important;
    }
     
  3. Rogier The20

    Rogier The20 New Member

    It worked, thank you so much!!
     
    1. AD Premium quality Divi premade designs bundle: https://divi.help/link-forums/divi-den.146/
  4. Rogier The20

    Rogier The20 New Member


    as last, would you be so kind to provide me with a ccs to also adjust the placeholder text color? As it is right now grey and fades in the background. Please see photos attached.

    Really appreciate your support, thanks in advance!
     

    Attached Files:

  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .et_pb_menu__search-input::placeholder {
        color: #fff!important;
    }
     
    1. AD Premium quality Divi premade designs bundle: https://divi.help/link-forums/divi-den.146/

Recommended Divi Hosting