Search bar

This topic contains 10 replies, has 2 voices, and was last updated by  Kor 6 years, 11 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • December 8, 2017 at 1:19 am #408737

    Joy
    Buyer
    Post count: 1076

    How do I move the search button below the text inputs on the search bar? I’ve been looking at code for hours, my brain no longer works.

    Thank you.

    December 8, 2017 at 6:03 am #408744

    Kor
    Moderator
    Post count: 16516

    Hi Joy,

    Custom CSS would be your only solution. Share me the URL and I’ll let you know how it is done.

    Thanks!

    December 8, 2017 at 6:06 am #408745

    Joy
    Buyer
    Post count: 1076
    This reply has been marked as private.
    December 8, 2017 at 6:13 am #408746

    Kor
    Moderator
    Post count: 16516

    Hi Joy,

    Try this 

    

    button.geodir_submit_search.fa {
    width: 100%!important;
}
    

		
	
    


    

			
				

    

	
    

		December 8, 2017 at 6:27 am

		
		#408749

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    Thank you, can I also control the size of the button or is that the only way to get in on another line with css?
    

		
	
    


    

			
				

    

	
    

		December 8, 2017 at 10:06 am

		
		#408763

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Joy, 
    

    How do you want it to look like? Perhaps you can point it out in a screenshot? 
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		December 8, 2017 at 10:16 am

		
		#408766

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    Having the search bar the full width of the text fields looks funny. I was thinking that maybe the width could be taken down to about 30% or so and centered but haven’t been successful with achieving that.:-(
    

		
	
    


    

			
				

    

	
    

		December 8, 2017 at 11:07 am

		
		#408769

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Joy, 
    

    Just played around with and it looks like what you needed would require some complex customization, unfortunately. Sorry about that. 
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		December 9, 2017 at 12:18 am

		
		#408886

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    Couldn’t I just add a line break into the code? What file would I edit?
    

		
	
    


    

			
				

    

	
    

		December 9, 2017 at 12:52 am

		
		#408896

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    Nevermind, my brain works again.
    

    

    body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search button.geodir_submit_search {
    position: absolute;
    margin: auto !important;
    width: 30%;
    margin-left: 35% !important;
    top: 60px;
}
    

		
	
    


    

			
				

    

	
    

		December 9, 2017 at 4:27 am

		
		#408908

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Joy, 
    

    Thanks for sharing. Just keep in mind that absolute positioning usually works, but requires more work on different screen sizes. 🙂 Consider media queries.
    

    Thanks!
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 11 posts - 1 through 11 (of 11 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount