Moving search bar to left side

  • Author
  • #875167


    I want to move my search widget from the right side of my blog to the left, underneath my navigation links. This is because I set up my home page to not have a right sidebar but I feel that people may need the search bar function later on when visiting my site. (I think the bottom widget areas are not visible enough). Can you help me find/compose the CSS for that? I am using the Suburbia theme.

    The blog I need help with is



    Do note that Suburbia supports five widget optional areas — four in the footer and one in the sidebar in single post and page views. The far left grid is reserved for page navigation which appears on index and archive view if they have more than one page.


    Just realized that I forgot to post my site:

    TimeThief, I do like the white space allowed on the far left grid but I’ll worried about visitors getting lost. If I could get the search bar into the header, that would be great too. I read on other threads that I other themes have the search bar in the header but I love the Suburbia theme too much to change =)


    Since the Suburbia theme doesn’t have a search widget already built in to the header, you could add one to a widget area and move it. This can be done on posts where the search widget appears like this one:

    To move that particular search widget into the header area on posts, you can add CSS like this:

    #wrapper {
    	position: relative;
    #search-6 {
    	display: block;
    	position: absolute;
    	top: 25px;
    	right: 0;

    Note that the “#search-6” selector is specific to that particular search widget that you added. If you were to change the search widget or remove it and re-add it, you would need to update that selector.

The topic ‘Moving search bar to left side’ is closed to new replies.