1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved 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 Rogier The20, Oct 14, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  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;
}
     
    #2 Divi.Help, Oct 16, 2020
  3. Rogier The20

    Rogier The20 New Member

    It worked, thank you so much!!
     
    #3 Rogier The20, Oct 16, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  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:

    #4 Rogier The20, Oct 16, 2020
  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;
}
     
    #5 Divi.Help, Oct 18, 2020
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  6. Anderson

    Anderson New Member

    Thanks a lot to you, just what I was looking for ❤ .
     
    #6 Anderson, Jan 11, 2021
(You must log in or sign up to post here.)