Add Amazon style search bar in top menu - Support | Kriesi.at

Hi,
please use this link screen resolution and tell us what your sreen size is so we can try to adjust this for you.

Best regards,
Mike

May 13, 2024 at 6:46 pm #1443289

Screen Resolution Test:
1920 x 1080

Screen Width: 1920 pixels
Screen Height: 1080 pixels
DPR(Device Pixel Ratio): 1
Color depth: 24 bits per pixel

May 15, 2024 at 11:12 am #1443649

Hi,
Thank you for your patience I changed this css:

@media only screen and (min-width: 990px) {
    .av-logo-container .inner-container {
        display: flex;
        flex-direction: row-reverse;
    }

    @media only screen and (min-width: 990px) {
        /* Add your Desktop Styles here */ .av-logo-container .inner-container .widget #searchform {
            width: 100%;
            min-width: 500px;
        }
    }

    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 80%;
        right: -15%;
        top: -5%;
    }

    #header_main > .widget {
        display: none;
    }

    .av-logo-container .inner-container .widget #searchform {
        width: 100%;
    }

    .av-logo-container .inner-container .widget #searchform .ajax_search_response {
        background-color: #fff;
        z-index: 3;
    }

    .header_color #search-6 input[type=submit] {
        background-color: #da291c;
        color: #fff;
    }

    .header_color #search-6 input[type=submit]:hover {
        background-color: #da291c;
        color: #fff;
    }

    #top #header.header_color .widget input[type=text] {
        border-color: ebebeb;
        border-radius: 3px;
    }

    #top #header.header_color .widget #searchsubmit {
        border-radius: 0 3px 3px 0;
    }

    #top #header.header_color .widget #searchform #searchsubmit {
        font-size: 16px;
    }

    .av-logo-container .inner-container #menu-item-shop {
        display: flex;
        order: 2;
    }
}

to this:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) and (max-width: 1439px) {
  .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 500px;
  }
  .av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
    right: -15%;
    top: -5%;
}
}
@media only screen and (min-width: 1440px) { 
    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 80%;
        right: -15%;
        top: -5%;
    }
    .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 380%;
  }
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}

#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform {
	 width: 100%;
}
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.header_color #search-6 input[type=submit] {
    background-color: #da291c;
    color: #fff;
 }
.header_color #search-6 input[type=submit]:hover {
    background-color: #da291c;
    color: #fff;
 }
  #top #header.header_color .widget input[type=text] {
	border-color: ebebeb;
	border-radius: 3px;
}
#top #header.header_color .widget #searchsubmit {
    border-radius: 0 3px 3px 0;
}

#top #header.header_color .widget #searchform #searchsubmit {
 	font-size: 16px;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

to update your live site copy your snippet named “header widget placement css” to your live site.

Best regards,
Mike

May 15, 2024 at 8:49 pm #1443735

Great thank you! What of that new code could be modifed to shrink the search width down a bit and align it right, away from the logo, but still just left of the cart icon? Thanks again!

May 15, 2024 at 9:08 pm #1443739

Scratch that, I think I got it above 1440px. The issue seems to be the ajax dropdown goes offscreen…

May 15, 2024 at 9:11 pm #1443740

Hi,
shall we close this thread then?

Best regards,
Mike

May 15, 2024 at 9:16 pm #1443742

Sorry my last reply did not go through. The ajax dropdown results go offscreen to the right, and the view all search results can be hard to see on hover and possibly cut off on the right as well.

May 15, 2024 at 11:16 pm #1443771

Hi,
I’m not experiencing this at 1920 x 1080, what screen resolution do you see this?
Please see the screenshot in the Private Content area of of what I see.

Best regards,
Mike

May 15, 2024 at 11:20 pm #1443772

Yes that is my resolution and that is what I see, the bleed off the screen to the right. And the view all search results can be hard to see on hover and possibly cut off on the right as well.

May 17, 2024 at 11:33 am #1444062

Hi,
Thank you for your patience, I made some adjustments, this is the css now:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) and (max-width: 1439px) {
  .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 500px;
  }
  .av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
    right: -15%;
    top: -5%;
}
}
@media only screen and (min-width: 1440px) { 
    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 65%;
        right: 0;
        top: -5%;
    }
    .av-logo-container .inner-container .widget > search {
        width:100%
    }
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}

#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.header_color #search-6 input[type=submit] {
    background-color: #da291c;
    color: #fff;
 }
.header_color #search-6 input[type=submit]:hover {
    background-color: #da291c;
    color: #fff;
 }
  #top #header.header_color .widget input[type=text] {
	border-color: ebebeb;
	border-radius: 3px;
}
#top #header.header_color .widget #searchsubmit {
    border-radius: 0 3px 3px 0;
}

#top #header.header_color .widget #searchform #searchsubmit {
 	font-size: 16px;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

please clear your browser cache and check.

Best regards,
Mike

May 17, 2024 at 5:45 pm #1444109

Hey Mike. I made some slight modifications to this, but I think this works. The only thing is that the “View all reseults” turns gray with a gray background on hover. If there is any small CSS change for that I’d love to see it. Also, is this creating a bigger gap below the main menu bar and sending content further down the page to start as the example page shows? Thanks!

This reply was modified 6 months, 1 week ago by Illingco.

May 18, 2024 at 1:10 pm #1444318