Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 27, 2020 at 7:39 pm #1178769
    studiono

    Hello there I need to add a search bar in the top header area, maybe with a widget? I have searched in the forum but didn’t find a solution for me.

    Can you please help me? I am adding a screenshot to show you what I need to achieve and a link to our website.

    THANKS!

    January 28, 2020 at 5:23 pm #1179085
    studiono

    any luck with this?

    January 28, 2020 at 5:29 pm #1179089
    Yigit

    Hey,

    Please refer to this post – https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area and add a widget area to your header and then refer to this post – https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode and enable debugging mode. Then edit one of your pages and add “Search” element under Content Elements tab of Advanced Layout Builder and then copy its shortcode from debugging field right below ALB and paste it in your header widget using Custom HTML widget :)

    Regards,
    Yigit

    January 28, 2020 at 5:46 pm #1179099
    studiono

    Hey thanks, I think something is working but not all of it :)

    I need the search bar to be on the top area (along with the social media icons) – is it possibile? You can check in my website belove

    thank you very much

    January 28, 2020 at 5:50 pm #1179104
    Yigit

    Hi,

    In that case could you please try pasting your shortcode in Enfold theme options > Header > Extra Elements in “Phone Number or small info text” field instead? :)

    Cheers!
    Yigit

    January 28, 2020 at 5:55 pm #1179107
    studiono

    ok great, now it is in the top area, is ti possible to move it on the right as a last item in that area? Now it is the first one. Thanks!

    January 28, 2020 at 11:52 pm #1179248
    studiono

    there is also an issue – with the search bar the header is now acting weird – the logo is cutted on the top and when I scroll down the header doesn’t shrink correctly. everything is solved if I remove the id of the widget in the top part of the header…

    January 29, 2020 at 11:18 pm #1179633
    studiono

    I solved the weird acting of the header but I still need the search bar to be on the right part of that area, as the last item. Can you please help me with that? And now I also have problems with the logo, when the header is shrinked it is too low (because of the search bar). Please help!

    Thanks!!

    January 30, 2020 at 9:10 am #1179733
    studiono

    any help?

    January 30, 2020 at 2:40 pm #1179885
    Mike

    Hi,
    To switch the search bar and social icons around, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #header_meta > .container {
	display: flex !important;
	flex-direction: row !important; 
}
#header_meta {
	float: right !important; 
}

    After applying the css, Please clear your browser cache and check.
    The reason the logo is lower is because the Phone info div is above the logo and menu, Please see the screenshot in Private Content area, the colored area is the logo and menu div.

    Best regards,
    Mike

    January 30, 2020 at 3:39 pm #1179928
    studiono

    Thanks Mike it works. What can I do to make the logo go a bit up so that it could be vertically centered in the shrinked version too? thanks!

    February 1, 2020 at 8:21 am #1180461
    Rikard

    Hi,

    Please try this CSS as well:

    .header-scrolled span.logo {
  margin-top: -10px;
}

    Best regards,
    Rikard

    February 1, 2020 at 10:32 am #1180484
    studiono

    it works! thanks rikard!

    February 1, 2020 at 11:32 am #1180492
    Mike

    Hi,
    Glad Rikard could help, shall we close this then?

    Best regards,
    Mike

    February 1, 2020 at 11:33 am #1180493
    studiono

    yes Mike thanks!

    February 1, 2020 at 2:14 pm #1180504
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘How to add a search bar in the top header area’ is closed to new replies.