Header widget area transparency and mobile widget

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Header widget area transparency and mobile widget

This topic contains 5 replies, has 2 voices, and was last updated by

 
Keymaster
3 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18241

    Participant

    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!

    #18259

    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 :)


    #18262

    Participant

    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.
    #18270

    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 :)


    #18297

    Participant

    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/

    #18314

    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 :)


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.