- This topic has 9 replies, 3 voices, and was last updated 4 years, 8 months ago by .
- The topic ‘Adding Search Form to Magazine Pro Header’ is closed to new replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
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?
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.
Thank you. Actually that's OK, I figured out how to move the search form lower.
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
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.
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.
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.
Ok that makes sense. Thank you Victor!
© 2023 WPEngine, Inc.