Moving the search widget to nav bar or header

  • whatsnickeating · Member ·

    Hi, I am am using the Twenty Twelve theme for my blog (www.whatsnickeating.com) and would like to move the search bar up. I guess technically it would be in the navigation bar or the header. Is there a way to do that?

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

  • timethief · Member ·

    That cannot be done without purchasing an annually renewable custom design upgrade for the blog so you can do CSS editing. As I don’t help with CSS editing I don’t know if it can be done so I tagged this thread and it will be moved to the CSS Forum where you can get a definitive answer.
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/editing-css/

  • designsimply · Member ·

    You can use absolute positioning to move blocks of HTML around on a page. Here is an example that will move the search widget to the top right of the main container element.

    #page {
	position: relative;
}
.widget_search {
	position: absolute;
	top: 135px;
	right: 20px;
}

    Adjust the number values as needed.

  • whatsnickeating · Member ·

    Thanks designsimply! That worked great for the template!

    However, the mobile version is messed up now. If you view it, the search widget appears in the middle of every screen. Is there perhaps some code to disable this modified widget for the mobile version since the mobile version already has its own search function?

  • thesacredpath · Member ·

    @whatsnickeating, since you are using a responsive theme, go to appearance > mobile and turn off the mobile theme option. Your theme will adjust for any screen width, including mobiles and will give you better results. Give it a try and see what you think. You may have to clear the cache on your mobile browser before the change will show up though.

  • whatsnickeating · Member ·

    Hey, thanks for the tip. I like the look better with the mobile option off. However, the search widget is plopped right on top of the logo. Do you think there are any clever work-arounds for this?

  • thesacredpath · Member ·

    When using position: absolute to move a text widget, it will float independent of all other elements so it does not flow with them. There isn’t any other way really to reposition one though. I wish I had a magic bullet, but I’ve never been able to figure out how to do it.

    I would suggest the search box at the top of the sidebar, but then the sidebar falls to the bottom on narrower screens.

    There are some themes that have a search box built into the header area. You might take a look at those themes and see if any of them are responsive designs. I know 2011 is.

  • designsimply · Member ·

    There are a couple ways around the issue you’ve described. One way is to use media queries to target the changes to different screen sizes. Here is a great primer with more info. about how media queries work that you should check out first:
    http://css-tricks.com/css-media-queries/

    Here is an example of two media queries that target small and medium screen sizes and do different things with the search depending on the screen width:

    @media screen and (min-width: 600px) and (max-width: 740px) {
	#page {
		position: relative;
	}
	.widget_search {
		position: absolute;
		top: 110px;;
		right: 20px;
	}
	.widget-area .widget_search h3 {
		margin-bottom: 0;
	}
	.site-header h2 {
		text-align: center;
	}
}
@media screen and (max-width: 600px) {
	#page {
		position: relative;
	}
	.widget_search {
		position: absolute;
		top: 175px;
		left: 5%;
		width: 90%;
		text-align: center;
	}
	.widget_search h3,
	.widget_search div,
	.widget_search form {
		display: inline;
		clear: none;
	}
	.widget-area #s {
		width: 25%;
	}
}
  • designsimply · Member ·

    Love the blog btw—I hope you do more interviews!

  • The topic ‘Moving the search widget to nav bar or header’ is closed to new replies.