Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 27, 2019 at 1:01 pm #1142742
    butcherboy

    Hi there

    How do I create a search bar that is ‘sticky’? Should I place it in the header with a widget?
    I also need a sticky call-to-action button – does this have to be in the header as well?

    Many thanks
    Jason

    September 27, 2019 at 6:59 pm #1142890
    Victoria

    Hey butcherboy,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    September 30, 2019 at 6:17 pm #1143462
    butcherboy

    Hi – I have put some mock-ups on the link supplied.

    Many thanks!

    Jason

    October 2, 2019 at 4:44 am #1144037
    Ismael

    Hi,

    Thank you for the update.

    \How do I create a search bar that is ‘sticky’? Should I place it in the header with a widget?

    Yes, you can add a search bar in a widget and insert the widget area in the header using an action hook as described in the documentation.

    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    We tried to login but the credentials above are invalid.

    Best regards,
    Ismael

    October 2, 2019 at 12:47 pm #1144145
    butcherboy

    Very sorry – typo in my info – now correct.

    Thanks for the tip I’ll check the doc and have a go :) What about the curved shape?

    Many thanks

    October 4, 2019 at 4:51 am #1144844
    Ismael

    Hi,

    Thank you for the update.

    You can apply a border radius property to the search input field to create that curved edges.

    #top #s {
     border-radius: 100px;
}

    Please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

    October 4, 2019 at 3:30 pm #1144996
    butcherboy

    Hi There

    Thank you for everything so far. I now have a search widget in my header :) How do I make it span full width and stick to the bottom of the header as per the mockup?

    Many thanks
    Jason

    October 4, 2019 at 9:48 pm #1145133
    Victoria

    Hi butcherboy,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (min-width:768px) and (max-width: 989px){
     #search-3 {
        padding: 50px;
    }
}
@media only screen and (min-width:1024px){
    #search-3 {
        padding: 120px;
    }
}
@media only screen and (min-width:990px) and (max-width: 1023px){
    #search-3 {
        padding: 100px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 5, 2019 at 4:23 pm #1145306
    butcherboy

    Hi Victoria

    Thank you. It was not quite how I imagined – is it how you expected? I added to the custom CSS file just to be sure but it is not really ‘pinned’ to the bottom of the header if you know what I mean? Also, how do I make that search bar full width? Any ideas?

    Many thanks
    Jason

    October 6, 2019 at 6:58 pm #1145482
    Mike

    Hi,
    Thank you for the login, I reviewed your css in the Quick CSS and found you were missing two closing brackets, I fixed and also commented out your #search-3 css in the custom.css file, and disabled your CSS file merging and compression, to reduce caching conflicts while working on this.
    I then added this css for desktop to pin the search bar to the bottom of the header with full-width:

    @media only screen and (min-width: 768px) {
#search-3 {
top: 100% !important; 
 padding: 0 !important; 
}
#header_main > div {
	padding: 0px !important;
}
}

    Please clear your browser cache and check, then you can enable your CSS file merging and compression if you wish, but I recommend leaving off until you are done with your site.

    Best regards,
    Mike

    October 7, 2019 at 12:53 pm #1145747
    butcherboy

    Hi Mike
    What a nice surprise! Thank you so much – looks perfect everywhere:)

    Many thanks
    Jason

    October 7, 2019 at 2:06 pm #1145767
    Victoria

    Hi Jason,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.