Adding Search Form to Magazine Pro Header

[marp]

I added a search form to the Magazine Pro header right widget area. My site has a logo in the middle of the header but the search form moved the logo over to the far left.

Is there a way to add the search form so the logo will stay in the middle?

[Sridhar Katakam]

Add the following in Magazine Pro's <span class="file-name">style.css</span>:

@media only screen and (min-width: 1024px) {

	.site-header .wrap {
		position: relative;
	}

	.title-area {
		width: 100%;
	}

	.site-header .widget-area {
		position: absolute;
		right: 0;
	}

}

---

Genesis Tutorials | Follow me on Twitter

[marp]

Thanks, that did the trick!

Hmmm, now that presents another question. Do you know, how I can edit the css for the search form location, and style? I'd like to drop it down lower closer to the navigation. And make it smaller.

[Sridhar Katakam]

Can you provide the URL of your site?

---

Genesis Tutorials | Follow me on Twitter

[marp]

Thank you. Actually that's OK, I figured out how to move the search form lower.

[marp]

However, I just realized that the code, while it brought the logo back to the center, caused the logo to stop linking to the home page. Here is the site: anxietyreliefproject dot com

[Victor Font]

The logo did not stop linking to the home page. Your header right widget area is too wide and is actually sitting on top of the logo blocking it from being clicked. You have to shorten the header right widget area. Look for the .site-header .widget-area class in style.css around line 1431 and change the width to 400px. That should fix it for you.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[marp]

Thanks for your help. One question though, I did not change the header widget width, it is the magazine pro theme default. So how did it become too wide? It was ok before I added the search form, so now I'm starting to worry that I'm going to create a spiral of edits and end up creating more problems.

[Victor Font]

The site header widget area doesn't exist in code until you add a widget to it. That's why everything worked before you added the search form. There was no widget area to overlap the logo.

Learn to use your browser's built-in inspection tools. They are your friend and allow you to test CSS changes non-destructively in your browser before applying them permanently to your code.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[marp]

Ok that makes sense. Thank you Victor!

[Author]

Posts