Header widget area transparency and mobile widget

[jh52847Participant]

Hi. so I am trying to put search widget on side bar but here’s the things that I would want to change.

look at my website https://www.hanjstar.com/en/most-important-korean-verbs-with-sentence/

1. I want this on top of everything (image or video hides this widget)
2. I want this to be non-transparent (I can see text through this widget)
3. I want this search box to be on center
4. widget does appear on mobile. (widget only appears in main page, probably hiding on my post page?)

This is the CSS that I am currently using for ajax search pro plugin but I have no idea.

#ajaxsearchprowidget-1,#ajaxsearchprowidget-2,#ajaxsearchprowidget-3,#ajaxsearchprowidget-4,#ajaxsearchprowidget-5,#ajaxsearchprowidget-6,#ajaxsearchprowidget-7,#ajaxsearchprowidget-8 {
min-width: 80% !important;
}

@media (max-width: 480px) {
#ajaxsearchprowidget-1,#ajaxsearchprowidget-2,#ajaxsearchprowidget-3,#ajaxsearchprowidget-4,#ajaxsearchprowidget-5,#ajaxsearchprowidget-6,#ajaxsearchprowidget-7,#ajaxsearchprowidget-8 {
min-width: 50% !important;
}
}

.AjaxSearchProWidget {
min-width: 100% !important;
}

@media (max-width: 480px) {
.AjaxSearchProWidget {
min-width: 50% !important;
}
}

.asp_m_1,.asp_m_2,.asp_m_3,.asp_m_4,.asp_m_5,.asp_m_6,.asp_m_7,.asp_m_8,.asp_m_9 {
width: inherit !important;
max-width: 800px !important;
}

Currently this is what I am

Thanks!

[Ernest MarcinkoKeymaster]

Hi,

1. and 2. If you mean the results box, then try this:

.asp_r {
    z-index: 99999999 !important;
    background: white !important;
}

3. I am not sure what do you mean by that, can you explain more?
4. Do you want to hide the search bar on mobile?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[jh52847Participant]

I included problem on image.

and css didn’t work.

1,2 you understood right? but I still having problem after including css you provided

3. I want this search box to place on center (indicated as green box.)

4. that was not what I mean’t but I would probably want to hide this on mobile.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

I think I am looking at the wrong URL? I am seeing this page on the link you sent: https://i.imgur.com/a4lxrvv.png

Is that the correct URL? Or do I need to look with a specific resolution? Thank you!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[jh52847Participant]

Hi
I was talking about general page because I made sticky header for any page.

best example page would be here

https://www.hanjstar.com/好きな人がいること-by-コバソロ-and-lefty-hand-cream/

[Ernest MarcinkoKeymaster]

Thanks!

1, 2, 3 try this:

#header-widget-area {
    margin: 0 auto;
    z-index: 99999999 !important;
    background: white !important;
    position: relative;
}
.asp_w {
    z-index: 99999999 !important; 
}

4. You can try a media query CSS to detect the screen width and hide the header widget ara.

@media screen and (max-width: 480px) {
  #header-widget-area {
    display: none !important;
  }
}

Please note, that this qualifies as a customization request, so I cannot make sure it works in all cases.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts