Quick search icon dislocated in responsive mode

Discussion in 'Closed Reports' started by AlexT, Nov 12, 2014.

  1. AlexT

    AlexT Customer

    Hi,

    I use a floating nav bar (only nav bar, no sub-nav or moderator bar). By default, the Quick Search Location is set to "2, Navigation Tab". This makes the floating nav bar look quite strange, with the quick search field "attached" to it while scrolling. So I changed the Quick Search Location to "1, Navigation Area". Much better! Only issue now: when I resize the screen into responsive mode, the search icon in the nav bar is dislocated. It is not in the nav bar, but almost outside the screen on top of the moderator bar.

    This does not happen when the quick search location setting is reversed to 2.

    See screenshot.

    Cheers
     

    Attached Files:

  2. Russ

    Russ Designer

    Sorry for the late response on this.

    This is somewhat.... as-designed. Techncially if you set the search position to 1 it's no longer inside the navigation area therefore really shouldn't float with the navigation.

    Setting it to option 2 does place it in the navigation area specifically in the sub-nav however since you're not floating the sub-nav you have two options:

    Hide it when floating nav is actually floating:
    Code:
    Copy Source
    .navFloatwrapper.fixed #QuickSearchPlaceholder {
    display: none;
    }
    
    Or add some sort of background to to which may look awkward. as you'll have the block scrolling with with.
     
  3. AlexT

    AlexT Customer

    Hi Russ,

    Not sure we are talking about the same thing. :eek: I was referring to the odd behavior when the skin's responsiveness kicks in. In the screenshot, do you see the arrow pointing to the top right? It's pointing to a fragment of the Font Awesome search icon. it's like the search icon "jumped" out of the navigation out of the screen as I resized the window and narrowed the width.
     
  4. Russ

    Russ Designer

    I see now :), I think you've put the logo back on top of the navigation. We need to find a better way of positioning it... but it may come down to manual adjustments as we have far too many options to get a global solution.
     
  5. AlexT

    AlexT Customer

    Hmmm. I only have "Enable logo in navigation" enabled. See attached screenshot (and also now better visible the misplaced search icon).
     

    Attached Files:

  6. Russ

    Russ Designer

    Ya that would do it too, part of the we have a lot of options haha, does it with swap logo with navigation unchecked as well(default core setup), I'm working on some manual fixes to help with general things, but it will probably still come down to manual adjustments, I'll grab one for you in a bit.
     
    AlexT likes this.
  7. Russ

    Russ Designer

    I applied a few various fixes in regards to it, but it's definitely not a one-trick pony and more than likely depending on how much customization you've done an adjustment may need to be made.
     

Let's work together on your next project

Contact us today to talk about how we can help you