Moving Search field from Widget to Nav Bar

  • Unknown's avatar
    maryellentc · Member ·

    Is there a way to move the search widget from the widget “fields” into the nav bar or the upper right hand part of my page?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    With Motif being a responsive designed theme that adjusts to all screen/window sizes, this is difficult. If you look at your site and narrow your browser window down and watch what happens to the elements in the header area, you will see that the menu items push almost all the way to the right end of the menu area, and then break to two lines. You will also see that your site title and description also start to flow onto two lines. As this happens the distance from the top of the browser window to the menu bar changes.

    To move a widget up into the header area we have to use position: absolute; which means the widget loses its relationship to the other page elements and effectively floats freely above them. As the header elements move into two lines, the distance from the top of your site to the location of the menu bar changes and we and the search box would then be out of alignment.

    We could use media queries to adjust the locations when things go to two lines, but we can’t control the settings on a user’s browser, and if they have the zoom level set to a plus value, or if they have a different default font size set, that is going to change things. In addition, different browsers render text and such differently, which means we can’t guarantee the point we choose for the break points in the media queries are going to catch all browsers.

    If you wish to add a search widget to your footer widget area, I can see what I can do with it, but I can’t guarantee that things are going to be aligned properly for all browser and all window/screen widths.

  • The topic ‘Moving Search field from Widget to Nav Bar’ is closed to new replies.