Viewing 4 replies - 31 through 34 (of 34 total)
  • my style.css looks like this

    /*styling a new widget area--------------------------right of logo-----------------------------------------------*/
    
    #navbar-top {
    	width: 100%;/*changes by yk moves right and left---------------------0--------------------------*/
    	float: none;
    	margin-left: 0px;
    	position: absolute;
            /* to put it virtually inside the navbar-inner */
    	top: 40px;/*changes by yk movesup and down-----------------------------------------------*/
            /* needed 'cause navbar-inner has z-index 200 */
    	 z-index: 210;
    
    }
    
    .navbar.notresp .row-fluid {
    	/* leave the space for our searchbox*/
    	margin-top: 0px;/*changes by yk social icon move up and down-----------------------------------------------*/
    }
    #navbar-top #searchform {
        max-width: 200px;/*changes by yk search button come besides the search box-----------------------------------------------*/
    	float: right;
    }
    
    #navbar-top #searchform input[type="text"] {
    	/* if you use percentage here something breaks*/
        width: 150px;/*changes by yk  search box size increases-----------------------------------------------*/
    }
    
    @media (max-width: 979px){
        #navbar-top{
           display: none;
        }
    }
    
    /* don't display the label "Search" */
    #navbar-top .screen-reader-text{
        display: none;
    }
    /* Hide the form */
    #navbar-top .searchform{
        display: none;
    }
    /* Use the magnifying glass as icon*/
    #navbar-top .widget_search:before{
        content: url(https://localhost/final/wp-content/uploads/2014/04/search-3-24.png);
    
    }
    /* When hover over the div widget_search display the form*/
    #navbar-top .widget_search:hover .searchform{
        display:block;
    }

    Main problem you have that pseudo-element “:before” for the .widget_search div, but then you assign a width of 150px to the searchform, so the widget_search will be 100% and that form only 150px, so it’s not a problem o left and right, is a problem of tell something to stay before something of (say) 1000px of width and tell something inside it to be 150px (and to the right).
    Also I “.searchform” and “#searchform”, but I think you’re using “#searchform”.
    My solution to your problem?
    1. replace those “.searchform” with “#searchform” ??
    2. add this to your style

    #navbar-top .widget_search {
    	float:right;
    	width: 50px;
    }
    #navbar-top .widget_search:hover {
    	width: 250px; /*adjust this to suit your needs*/
    }
    #navbar-top .widget_search:hover:before {
    	display: none;
    }

    Hope this helps

    thank you so much
    im so glad that you help we need people like you more
    and it worked and i replaced “.searchform” with “#searchform” ??

    #navbar-top .widget_search {
    	float:right;
    	width: 220px;
    }
    #navbar-top .widget_search:hover {
    	width: 450px; /*adjust this to suit your needs*/
    }
    #navbar-top .widget_search:hover:before {
    	display: none;
    }

    Glad you solved, and thanks for your kind words.

Viewing 4 replies - 31 through 34 (of 34 total)
  • The topic ‘Adding a Search in the header?’ is closed to new replies.