[Resolved] Add Search Bar to Header without displacing Logo

Home Forums Support Add Search Bar to Header without displacing Logo

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #913763
    toasterpc

    Okay, it seems I’m about able to launch.

    I’m only missing the search bar.

    The idea would be to have something like this:
    Sample of intended result

    But every time I try to insert the shortcode using Hooks, the entire menu gets displaced or the search bar ends up on top of the header.

    Thanks in advance!

    #913766
    Leo
    Staff
    Customer Support

    Hi there,

    So you would want to move the menu items below the header then?

    We did something similar with Prime:
    https://gpsites.co/prime/

    #913782
    toasterpc

    Exactly!

    Only with the exception of using this search bar.

    #913870
    Leo
    Staff
    Customer Support

    That’s the Search Prime is using as well.

    So here is the hook element used to insert it:
    https://www.screencast.com/t/dBzo3zDqU

    Abd here is the CSS related to the header:

    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
    		-ms-flex-align: center;
    		align-items: center;
    }
    
    .woo-search {
        margin-left: 30px;
        margin-right: 30px;
        -webkit-box-flex: 1;
    		-ms-flex-positive: 1;
    		flex-grow: 1;
    }
    
    .header-widget {
    	order: 10;
    	line-height: 1em;
    	font-size: 20px;
    }
    
    .header-widget p {
    	margin: 0;
    }

    Prime is using the header widget to insert the text: GP | Gutenberg | Woo.

    Navigation location is set to below header.

    Let me know if this helps πŸ™‚

    #914767
    toasterpc

    If it helped?!

    It worked wonders! I’ve been stuck there for two weeks!

    Seriously, thanks!

    #914770
    toasterpc

    By the way, I’ve been trying to adjust woo-search’s border-radius to 30px to no avail. Is there another selector I must take into account to give the search box rounded edges?

    #914780
    Leo
    Staff
    Customer Support

    Something like this?

    .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
        border-radius: 30px;
    }
    #914793
    toasterpc

    That’s it!

    Thanks man, you’re a godsend!

    #914834
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.