• 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 bar showing up in wrong place

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 bar showing up in wrong place

This topic is: not resolved

Tagged: search bar, validation

  • This topic has 3 replies, 2 voices, and was last updated 6 years, 1 month ago by Victor Font.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 31, 2016 at 8:49 am #198521
    wanderer
    Participant

    Hello! Happy New Year's Eve.

    With much difficulty I managed to configure a google search bar to be on the side of the navigation menu instead of in a widget in the sidebar. I'm not sure it is even correctly configured but I've been using it for a while and it worked fine.

    I just added subpages to the primary navigation menu and now the search bar is showing up floating under the last page on the primary navigation menu, instead of off to the right on the nav bar where it should be.

    This is what the W3C validation error says:

    173 Unknown pseudo-element or pseudo-class ::selection [selection]
    401 .row Parse Error *zoom: 1;
    402 .row Parse Error }
    870 .search-form input[type="search"] Value Error : height attempt to find a semi-colon before the property name. add it
    871 .search-form input[type="search"] Value Error : width attempt to find a semi-colon before the property name. add it
    877 .search-form input[type="button"] Value Error : height attempt to find a semi-colon before the property name. add it

    Here is my code from line 863-878

    .search-form {
    overflow: hidden;
    width: 100%;
    }

    .search-form input [type="search"] {
    height 100%
    width: 100%
    background: #fff url(images/search.png) no-repeat 15px 16px;
    background-size: 15px 15px;
    padding: 16px 16px 16px 44px;
    }
    .search-form input[type="button"] {
    height: 100%
    width:100%
    }

    I'm sure this is a simple fix. Can anyone help please? I'm desperate. Thank you!

    http://wander-argentina.com
    December 31, 2016 at 10:07 am #198523
    Victor Font
    Moderator

    You are missing a colon after the height in the second block of CSS and you have no semi-colons after any of the height and width directives.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    December 31, 2016 at 12:14 pm #198531
    wanderer
    Participant

    Thank you Victor, you are my hero of the day!

    Pretty obvious -- it's 40c here in Buenos Aires and no air-con. The heat makes me dumber than normal.

    For some reason it didn't work though, even though my errors are down from 30 to 27 now!

    There seems to be some other problem.

    Here's what the validator says:

    173 Unknown pseudo-element or pseudo-class ::selection [selection]
    401 .row Parse Error *zoom: 1;
    402 .row Parse Error }
    1060 .widget p:last-child, .widget ol > li:last-child Parse Error last-child. .widget ul > li:last-child { border: none; margin-bottom: 0; padding-bottom: 0; }
    2022 Feature -webkit-min-device-pixel-ratio doesn't exist for media screen ), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .search-form input[type="search"] { background-image: url(images/[email protected]); } }

    webkit seems to be causing problems -- the first error is in here somewhere:

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    textarea:focus,
    .button {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    }

    ::-moz-selection {
    background-color: #333;
    color: #fff;
    }

    ::selection {
    background-color: #333;
    color: #fff;
    }

    a {
    color: #ffa64f;

    Second error here somewhere (for some reason the is in an area that /*test*/). I hired a guy online to make the site mobile. I have read the *zoom part is not standard:
    the code that causes the second error:

    /*test*/
    .banner-wrap .banner-content-holder {
    padding: 30px 35px;
    background:#009933;
    }
    .banner-wrap.up {
    margin-top: -166px;
    }
    .span4 {
    width: 370px;
    float:left;
    }
    .row {
    margin-left: -30px;
    *zoom: 1;
    }
    .row:before,
    .row:after {
    display: table;
    content: "";
    line-height: 0;

    January 1, 2017 at 10:49 am #198551
    Victor Font
    Moderator

    The W3c validator is a little behind the times and not 100% accurate. It will often show errors or warnings on perfectly valid code. The code you posted is missing some closing braces, but I don't know if that's due to the way you copied and pasted or if that's what's actually in your style sheet. You're going to have to learn over time what to ignore from the validator. Learn to use your browser inspect and debug tools. It provides a better picture for you.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and 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