Support » Themes and Templates » Search box need to be freezed

  • 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. -> good one, but I want it freezes -> bad one

    Thanks in advance,

Viewing 6 replies - 1 through 6 (of 6 total)
  • WPyogi


    Forum Moderator

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

    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;
    Moderator Jose Castaneda



    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…

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

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

    /* 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,

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Search box need to be freezed’ is closed to new replies.