Archived

This topic is now archived and is closed to further replies.

  • 0

Centering The SEARCH In Fixed Nav Bar!

Question

Posted · Report post

Hi guys. So I have a fixed nav bar on my website... Nothing special, the standard one on pagelines. But I want to center the Search text field so its in the center of the nav bar. Help PLEASE

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

Hi, you're almost on the right track.

 

Try this in Dashboard > PageLines > Site Options > Custom Code in CSS Rules with: 

Let us know if this code works for you.

.searchform .searchfield {
    backgroundurl("images/search-btn.png") no-repeat scroll 5px 50% transparent;
    border-radius13px 13px 13px 13px;
    height40px;
    margin-left-800px;
    margin-right550px;
    padding5px 5px 5px 28px;
    transitionall 0.7s ease 0s;
    width250px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Can you provide a link to your site please? 

Share this post


Link to post
Share on other sites

Posted · Report post

www.headedforgreatness.com

Share this post


Link to post
Share on other sites

Posted · Report post

centering the nav menu items would require custom CSS. Therefore, I recommend using Firebug or your browsers built-in web dev tools and inspect the nav to find the correct code.
 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites

Posted · Report post

Thats exactly what I did.... I used firebug. I messed around with css but i still couldnt get the search item in the nav bar to be centered. It wont go any further to the left......... super frustrating.

Share this post


Link to post
Share on other sites

Posted · Report post

Could you provide some examples of the codes you have tried and we will take a look for you?

Share this post


Link to post
Share on other sites

Posted · Report post

.searchform .searchfield {

margin-left:auto;

margin-right:auto;

}

 

but i know im touching up on the search box because i used the same line to edit the width of the search and it worked.

.searchform .searchfield {

width:250px;

}

 

 

just dont know how to center it on the nav bar...... or even move it manually to the left more.... 

Share this post


Link to post
Share on other sites

Posted · Report post

Thank You Veryyyyyy MUCH!!!!! it works.... I have one last question... Im not sure what I did. But when i go to Dashboard > PageLines > Site Options > Custom Code in CSS Rules and when i try to scroll down with the mouse... it does not work. so the only way I can scroll down in the css is if i click the text in the text box and hold the arrow key to scroll down... this started happening from yesterday.... once i forget and scroll with my mouse it scrolls back to the top again..... was wondering if you guys could help me with this problem..

Share this post


Link to post
Share on other sites

Posted · Report post

Unfortunately, I don't know how this could be related to PageLines.  I will say that the CSS Rules area is in essence, a page within a page, which is why you may need to click inside the text area to make it scroll using the mouse.  It could be that before, your volume of CSS was shorter, thus the inset page (where the CSS is) did not have a scroll slide on the right side so you could use the mouse to move up and down. But once that side slide appears, I don't think you can use the mouse the same way.  This is normal with any such page.

Share this post


Link to post
Share on other sites

Posted · Report post

I see. Thanks for everything rob. I was wondering if there was a way I can change the font of the Search inside the nav bar. The font and font size? also i noticed you guys are located in san francisco. Are you guys hiring by any chance. I am a recent graduate from csueb with a degree in Business Administration Emphasis Marketing Management and Finance. I'm trying to get into sales.

Share this post


Link to post
Share on other sites

Posted · Report post

The font size is controlled by CSS which can be found using Firebug for Firefox or Chrome's Inspection Tool.  Either of those have a sandbox where you can test changes, and then copy them to place in CSS Rules for implementation.

 

I don't know of any sales or marketing positions open at this time, but feel free to check out our job center http://www.pagelines.com/jobs/

Share this post


Link to post
Share on other sites

Posted · Report post

Definitely. Thanks again!

Share this post


Link to post
Share on other sites