Search box hangs off menu

[Sheila Fredrickson]

I want to add a search box to my navigation area. I already have a “Facebook” icon there, and there seems to be sufficient space for all to fit.

Despite that, the search box hangs off the edge of the navigation area by probably 30 pixels. See attached screen shot.

Is there possibly a fix for this? A forum search didn’t come up with anything.

Thanks in advance!

Sheila

Attachments:

1. 

   mmpd-screen-1.jpg
   

[Bill Robbins]

Shelia,

I’d be glad to take a look for you. What’s the URL to your site?

Thanks,
Bill

[Sheila Fredrickson]

This reply has been marked as private.

[Sheila Fredrickson]

This reply has been marked as private.

[Bill Robbins]

Good Morning Shelia,

Thanks for sending over the login information. Let’s start off with the button color. In the customizer, there is a section for buttons. You can change the button’s colors there. If you need it to have separate colors from the other buttons in the site you can. Here’s how to do that:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   #navigation .button {
   	color: #fff;
   	background-color: #226202;
   }
   
   #navigation .button:hover {
   	color: #fff;
   	background-color: #226202;
   }
   

4. The top style there is for the normal state of the search button. The second style is for the hover state. You can change those colors to fit your style.
5. Save your changes.

That should take care of the button color. Let’s try this approach for your search box’s positioning:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   .header-search {
   	margin: 0;
   	width: 200px;
   }
   
   .header-search input#s {
   	width: 120px;
   }
   

4. Save your changes.

Let me know if you run into any trouble.

Have a great week,
Bill

[Sheila Fredrickson]

Thanks, Bill.

The Search box in the nav bar does work, but it makes the bar wider. I need to ponder on that. I may end up putting it in the sidebar for the pages that will have one.

Can you answer just one more question? I’m sorry for being a bother.

Is there some CSS that can be added to underline all the links on the site?

Many thanks for your patience, I do appreciate it.

Sheila

[Bill Robbins]

It is possible to underline your links. Here’s how I would go about that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #content a.button,
   .widget a.button {
   	text-decoration: none;
   }
   
   #content a,
   .widget a {
   	text-decoration: underline;
   }
   

3. Update your settings.

That should underline your links in your main page content and also in your widgets. It’ll skip buttons and also your navigation menu links/logo. Let me know if you have any questions.

Bill

[Sheila Fredrickson]

Thanks again, Bill.

That did it!

Sheila

[Bill Robbins]

Fantastic Sheila 🙂

[Author]

Posts