Tagged: amazon, custom header, full width, search
-
AuthorPosts
-
October 27, 2016 at 7:19 pm #704967
Hello All
I am trying to customize the Enfold header to be more like Amazon.comI would like to have the product catagories dropdown in the search and a sub menu below the main header. I know its possible as I can get the demo to work in inspect editor, but I cannot replicate it in code. Any help would be extremely appreciated.
URL: client.kylebarnick.com/buildroom
- This topic was modified 8 years ago by kylebarnick.
October 31, 2016 at 6:30 am #705973Hey kylebarnick,
Please could you share a bit more detail as to what you wish to achieve. Also provide the code you use in the inspect editor that worked but not on the real site.
Best regards,
JordanOctober 31, 2016 at 6:16 pm #706374Basically, I am trying to make the search bar full width and responsive for screens larger than 990px. I want a header similar to that of Amazon.com. I still need the sub menu below it.
Here is the code from inspect editor.
#top #searchform>div {
position: relative;
max-width: 100%;
width: 1500px !important;
}November 2, 2016 at 5:08 am #706951Jordan
I found this post in the forums from Ismael:https://kriesi.at/support/topic/can-we-move-or-expand-the-search-bar/
this is exactly what I am wanting to do. The key differences are that I would like a menu below the logo and search bar, and that I would like it completely responsive and then disappear on mobile
November 2, 2016 at 3:40 pm #707167Hi,
Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
However, I think it would be easier to search for a plugin with such a function. Not sure if we can help you with this customization.
Best regards,
AndyNovember 2, 2016 at 8:30 pm #707332I have figured out what I wish to achieve. I just need to know where I can find [header_main] and [header_meta]?
November 2, 2016 at 8:57 pm #707348November 2, 2016 at 9:17 pm #707361In theory I should be able to flip them and achieve what I want, correct?
November 2, 2016 at 9:25 pm #707365Hi,
In theory, yes. However end results might be not as expected. Have you tried choosing “Logo center, menu above” option in Enfold theme options > Header tab? Here is an example on a demo site – http://kriesi.at/themes/enfold-lifestyle-blog/
Best regards,
YigitNovember 2, 2016 at 9:37 pm #707370not what I am looking for. Think Amazon.com header
November 2, 2016 at 9:41 pm #707374Hi!
In that case, “logo left, menu below” option should help. Then you can add widget area to your header – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and place your content (search box or additional logos like amazon) inside it
Regards,
YigitNovember 2, 2016 at 9:58 pm #707382It has all worked great. The only problem I am running into is resizing the search bar, any tips? I would like to make it responsive
November 3, 2016 at 5:28 am #707511This is all working great. I have one issue. When resizing to smaller screens, the search bar moves left covering the logo. How do I fix this.
Also
I am trying to add SKU to Shop archive page. PHP works fine, but I need the sku under the Product name. Any tips?client.kylebarnick.com/3dadisplay
November 4, 2016 at 2:54 pm #708201Hi,
you could try this code inside Quick CSS field:
@media only screen and (max-width: 767px) { #header .widget { padding-top: 89px; }}
and adjust as needed.
Best regards,
AndyNovember 11, 2016 at 5:22 pm #711277One final question for this search bar. When I have results dropdown showing. There is not a way to close it even if I delete the searched text, it stays. Any ideas?
November 14, 2016 at 12:21 pm #711888Hi,
this is default behavior and would not be too easy to customize it. If you really need, you can hire a freelance developer for this job here: http://kriesi.at/contact/customization
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.