• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Search form in primary navigation menu not matching same colors (Metro Pro)

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Search form in primary navigation menu not matching same colors (Metro Pro)

This topic is: resolved

Tagged: background color, Metro Pro, primary navigation, Search Form

  • This topic has 7 replies, 3 voices, and was last updated 6 years, 6 months ago by viajeroscallejeros.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 17, 2016 at 3:47 pm #191488
    mat3d
    Member

    Hello,

    This is my first post on this forum so I hope to write in the correct section. I am using the Magazine Pro theme on one website and I recently bought the Metro Pro theme for a new website.

    Concerning Metro, in the Theme Settings I selected "Search Form" for the Primary Navigation Extras but the form has a white background color while the navigation menu is dark grey. I selected the same option with the Magazine Pro theme and the search bar matches the menu's colors. Any idea how can I have the same result on Metro too?

    Many thanks!

    Mat

    August 18, 2016 at 8:05 am #191530
    Christoph
    Member

    Hi Mat,

    do you have a link to the website?


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    August 18, 2016 at 8:37 am #191536
    mat3d
    Member

    Hi Christoph, here it is:

    http://mirrorlesscomparison.com

    August 18, 2016 at 9:42 am #191545
    Christoph
    Member

    Thank you.

    Around line 677 of the style.css you will find .search-form input[type="search"] {

    Change
    background: #f5f5f5 url(images/search.png) no-repeat 15px 16px;

    to
    background: #333 url(images/search.png) no-repeat 15px 16px;

    You'd probably want to create a few new selectors (right underneath):

    This removes the border and the shadow effect around the search box

    .search-form input {
        border: none;
        box-shadow: none;
    }

    This changes the text color of "Search this website..."

    nav input[type="search"]::-moz-placeholder {
    	color: #fff;
    }
    
    nav input[type="search"]::-webkit-input-placeholder {
    	color: #fff;
    }
    
    nav input[type="search"]:-ms-input-placeholder {
      color: #fff;
    }

    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    August 18, 2016 at 10:21 am #191547
    mat3d
    Member

    Thanks a lot Christopher! I have two additional questions if you don't mind:

    - When I start typing in the search form, the text becomes dark again. Which additional code should I add to have it white?

    - The code seems to work on Safari only. I can't see the changes in Chrome or Firefox even after doing a hard refresh. The same things happened yesterday when I was trying to change the style of the blockquote. Any idea why?

    Mat

    August 18, 2016 at 12:06 pm #191549
    Christoph
    Member

    I don't see any changes to the style.css

    Make sure to empty all caches (plugin, hosting, CDN (Cloudflare) )

    This should change the color of the "text that is searched for"
    .search-form input {
    border: none;
    box-shadow: none;
    color: #fff;
    }


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    August 19, 2016 at 2:28 am #191585
    mat3d
    Member

    The color of the text being search for is now ok.
    The form shows correctly in other browsers too.
    Thank you again!

    September 22, 2016 at 2:23 am #193511
    viajeroscallejeros
    Member

    It's possible to put the search form in the secondary menu?

    My blog: http://www.viajeroscallejeros.com/

    Thanks!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Search form in primary navigation menu not matching same colors (Metro Pro)’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble