Search Bar Width

This topic contains 8 replies, has 2 voices, and was last updated by  Guust 7 years, 2 months ago.

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

Open Support Ticket
  • Author
    Posts
  • August 30, 2017 at 10:07 am #393480

    Joy
    Buyer
    Post count: 1076

    Hello, how can I get the search bar on the supreme theme to widen? It’s smaller than I would like.

    https://wpgeo.directory/supreme-directory/

    Thank you.

    August 30, 2017 at 10:39 am #393483

    Guust
    Moderator
    Post count: 29970

    Change this width in the Supreme style.css file.

    

    .sd.home .featured-area .geodir-loc-bar-in, .sd.sd-location .featured-area .geodir-loc-bar-in {
    max-width: 590px;
}
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		August 30, 2017 at 8:19 pm

		
		#393571

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    I’m sorry but that didn’t do anything to adjust the width of the search bar. Can you please double check?
    

		
	
    


    

			
				

    

	
    

		August 30, 2017 at 8:24 pm

		
		#393572

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    I’ve found that adjusting this will get the width to my liking, but then the margins are off and the search bar is not centered:
    

    

    body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search {
width:130%;
}
    

		
	
    


    

			
				

    

	
    

		August 30, 2017 at 10:37 pm

		
		#393584

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    Without seeing the web page in question, it is all a bit of a guess, so please post URL and WP admin details please.
    
Thanks
    

		
	
    


    

			
				

    

	
    

		August 31, 2017 at 12:19 am

		
		#393616

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		August 31, 2017 at 12:51 am

		
		#393628

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    Changing the max-width only changes if you change the title of the page.
    
The search bar is designed to be the same width as the title.
    
You have to use a max-width to keep it inside the .header-wrap.
    
Change the width of the .header-wrap if you like.
    

		
	
    


    

			
				

    

	
    

		August 31, 2017 at 1:05 am

		
		#393637

		
		
		
	
    


    


    

	
    

		
		
    Joy
    Buyer
    
		
		
     Post count: 1076
    
	
    

	
    

		
		
    That seems to have no effect either. Even if I expand the .header-wrap it doesn’t change the size of the content within the div.
    

		
	
    


    

			
				

    

	
    

		August 31, 2017 at 1:22 am

		
		#393641

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    I changed 
    

    

    .header-wrap {width: 90%}
.sd.home .featured-area .geodir-loc-bar-in, .sd.sd-location .featured-area .geodir-loc-bar-in {max-width: 1000px;}
    

    in style.css
    

    You need to clear caches to see any changes.
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 9 posts - 1 through 9 (of 9 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