Search box need to be freezed (7 posts)

  1. Fristi
    Posted 2 years ago #

    Hey all,

    I'm currently running the Twentyeleven wordpress theme. Got my childtheme, works perfect. I am trying to 'freeze' the search box.
    I already moved it from header to my menu, but now I want 2 things:

    1: Get the search box in a white color instead of the black he is taking over of the menu.
    2:I don't want that my search box moves when I click in it.

    Uploaded 2 pictures, 'search in' is when I click in it. I want this permanent. 'Search out' is taking it black background color of the menu.

    http://i.imgur.com/9PBjo.png -> good one, but I want it freezes
    http://i.imgur.com/56VmI.png -> bad one

    Thanks in advance,

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Can you post a link to your site? It's really not possible to help with something like this without seeing the site live.

  3. zeaks
    Posted 2 years ago #

    Search in the menu doesn't even expand on click on my site, but this should work for the regular search.

    #branding #s {
        width: 196px;
  4. Jose Castaneda
    Posted 2 years ago #

    I want to say that is a javascript function that may do that but without a link to your site like WPyogi stated we can't be of much help. It could also be achieved with CSS3 animations and states...

  5. Fristi
    Posted 2 years ago #

    I am testing it local with XAMPP...
    That's why I uploaded the imgur files so you guys could see it.
    Any suggestions?

  6. zeaks
    Posted 2 years ago #

    It's a css transition effect that does it. It can be countered by setting a width of the box.

  7. Fristi
    Posted 2 years ago #

    /* Search Form
    ----------------------------------------------- */
    #branding #searchform {
    	position: absolute;
    	top: 30.5em;
    	right: 6.5%;
    	text-align: right;
    #branding #searchform div {
    	margin: 0;
    #branding #s {
    	float: right;
    	-webkit-transition-duration: 400ms;
    	-webkit-transition-property: width, background;
    	-webkit-transition-timing-function: ease;
    	-moz-transition-duration: 400ms;
    	-moz-transition-property: width, background;
    	-moz-transition-timing-function: ease;
    	-o-transition-duration: 400ms;
    	-o-transition-property: width, background;
    	-o-transition-timing-function: ease;
    	width: 75px;
    #branding #s:focus {
    	background-color: #f9f9f9;
    	width: 180px;
    #branding #searchsubmit {
    	display: none;
    #branding .only-search #searchform {
    	top: 5px;
    	z-index: 1;
    #branding .only-search #s {
    	background-color: #666;
    	border-color: #000;
    	color: #222;
    #branding .only-search #s,
    #branding .only-search #s:focus {
    	width: 85%;
    #branding .only-search #s:focus {
    	background-color: #bbb;
    #branding .with-image #searchform {
    	top: auto;
    	bottom: -27px;
    	max-width: 195px;
    #branding .only-search + #access div {
    	padding-right: 205px;

    This is my childtheme css code for the search box.
    If I delete #branding #s, nothing happens because mothertheme got it..ยต
    How can I 'delete' it in my child theme?

    Thanks in advance,

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.