WordPress Help Re: Search Bar

7 replies
  • WEB DESIGN
  • |
Hi Guys.

Please can someone help me alter my Wordpress theme layour so i can place my 'Search Bar' and also place a facebook button into the top section of my website. I have entered 'just here' so you can see exactly where i would like them situated.

www.ashfielddeals.co.uk

Appreciate any help that is given

Shaun
#bar #search #wordpress
  • Profile picture of the author clickbump
    Hi Shaun, here's what you need to do to get the search box where you want it:

    1) Go to "Appearance > Editor" and locate the style.css file to open it for editing.

    2) Scroll to the bottom of the file and enter this custom css at the bottom and click "Save"

    Code:
    #searchform{position:absolute;top:5px;right:0}
    .screen-reader-text{color:#fff}
    PS: I did not see a facebook icon on your page so I can't give you the css you need to move that. However, as long as you know the class or id of its container element, you can use similar css to that I've given you above.
    Signature
    {{ DiscussionBoard.errors[7422284].message }}
    • Profile picture of the author FanPageLinks
      Thanks a lot for your reply.

      I think there is some code or css or whatever it may be that is stopping from this working as you instructed. The top right section is a place for menus that i can create and they automatically go in that area and with me wanting to place facebook and search bar in their i believe that that code may have to be taken out first.

      Do you understand what i mean mate? Im a novice when it comes to Wordpress and still trying to get my head around it.

      I have attached the style.css below

      /: I did not see a facebook icon on your page so I can't give you the css you need to move that. However, as long as you know the class or id of its container element, you can use similar css to that I've given you above.[/quote]
      Signature
      Over $64,000 In Affiliate Sales!!!
      Everything will be revealed >>> [Click Here] <<<

      {{ DiscussionBoard.errors[7422533].message }}
      • Profile picture of the author clickbump
        Originally Posted by FanPageLinks View Post

        Thanks a lot for your reply.

        I think there is some code or css or whatever it may be that is stopping from this working as you instructed. The top right section is a place for menus that i can create and they automatically go in that area and with me wanting to place facebook and search bar in their i believe that that code may have to be taken out first.
        Did you paste the css I sent into the style.css file at "Appearance > editor" as I suggested?

        Please let me know what you've done and I can better help you. Also, please remove the css you pasted. Its unnecessary to paste that here since I can see it on your site in chrome's dev tools anyway.

        Also, in your original post you indicated that you wanted the search bar moved to the place at the top of your header area where your placeholder text "just here" was. I tested the code I sent you so that it did just that. However, you appear to have changed your mind and want a nav menu there? That's fine, you just need to let us know where you want the search box in relation to the menu.

        Once you are able to paste the css where it needs to be and save it, you should be able to tweak the values to get the exact positioning you want.
        Signature
        {{ DiscussionBoard.errors[7425710].message }}
        • Profile picture of the author FanPageLinks
          Hi Clickbump.

          Sorry for the late reply and thanks for your expert help. Please be patient with me as i'm a newbie to this stuff (must be frustrating for the WPress experts).

          I have placed the search bar back in the desired place but there is a menu underneath it, this is why i removed after your help. I can remember seeing in some code somewhere that even if i dont have any menus there is placed holder text in the theme that shows up on my site when there isnt any menus, something like 'Create A Menu In Appearance To Go Here' goto Appearance>Menus> and once ive created a menu it then replaces for quoted text above.

          Also the above menu and menu text appears on every page in the top right so i believe it must be coded to every page i create.

          Just another thing, i asked a question re: the images that are on my homepage (7 in total) im looking for one of things where if you hover over the images it lets you like/share it on facebook, do you have any knowledge on this section.

          Much appreciated mat.

          Shaun
          Signature
          Over $64,000 In Affiliate Sales!!!
          Everything will be revealed >>> [Click Here] <<<

          {{ DiscussionBoard.errors[7426462].message }}
  • Profile picture of the author clickbump
    To remove the navigation placeholder text, add this to your css, just below the previous code I sent you:

    Code:
    #nav{display:none}
    However, if you decide you want the nav menu to appear, assuming your theme developer is utilizing the built in "custom menus" feature of wordpress, you will be able to control it via "Appearance > Menus". In that case, you'll want to make room in the header for both the search box and the nav elements. To do that, replace the previous css I sent with this:

    Code:
    #searchform{position:absolute;top:-15px;right:0}
    .screen-reader-text{color:#fff}
    #nav{margin:20px 0 0 0}
    Signature
    {{ DiscussionBoard.errors[7427266].message }}
    • Profile picture of the author FanPageLinks
      Thanks.

      Top man
      All the best
      Shaun
      Signature
      Over $64,000 In Affiliate Sales!!!
      Everything will be revealed >>> [Click Here] <<<

      {{ DiscussionBoard.errors[7427320].message }}
  • Profile picture of the author clickbump
    Happy to help Shaun. Best of luck with your site!
    Signature
    {{ DiscussionBoard.errors[7428037].message }}

Trending Topics