Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Adding a search site thingy to the menu bar

  1. notchangingmyname
    Member

    Hi all.

    I'm currently using the Fresh and Clean layout. Right now I'm using the custom menu, which includes my pages and categories, aligned to the left. I would like to add a search the site thingy in the menu bar as well, right aligned. The link below is just an example of how I would like it to look.

    http://flavorpill.com/newyork

    I might also want to add my twitter etc. buttons up there.

    Is it possible?

    I'm about to buy the CSS customization package, and have been playing around with the CSS preview, so if it's something that can only be accomplished with CSS I'm cool with that. I just want to know if it can be accomplished period. Thanks in advance!

    The blog I need help with is notchangingmyname.com.

  2. thesacredpath
    Staff

    You will have to add the search widget to the sidebar and then use positioning to move it up and into the menu bar area. I see you have one on the bottom of your sidebar and this code will move it up and hide the title.

    #page {
position: relative;
}

#search-3 {
position: absolute;
top: 121px;
z-index: 100;
right: -10px;
}

#search-3 .widget-title {
display: none;
}

    If you also want a search widget at the bottom of the sidebar, add another one to use for that purpose.

  3. notchangingmyname
    Member

    You are awesome!

    But I am clueless...where exactly should I paste that? I tried to copy and paste that into a few different spots in the css code, but i kept getting errors. Am I putting that in place of something that's already there?

    Again, thanks so much!

  4. designsimply
    Happiness Engineer

    CSS changes for WordPress.com can be added into the editor on Appearance → Custom Design → CSS page. WordPress.com charges a yearly upgrade fee for the ability to customize blogs with CSS. You can preview changes any time though.

  5. notchangingmyname
    Member

    Thanks for your response, but I did know that part. I'm not THAT clueless lol! I meant where in the CSS sheet should I paste it? I've been playing with the code and then hitting "preview," but when I pasted the code that thesacredpath gave me, above, I kept getting the error message "Are you sure you want to do that?"

    Thanks!

  6. thesacredpath
    Staff

    First off, pasting the entire stylesheet into the CSS edit window can cause unintended consequences. What is recommended is that you keep the "add to existing..." button selected and then add only the specific selectors and only the specific declarations you need to your custom CSS. Anything that is not changing, do not include.

    Paste what I gave above at the bottom of whatever CSS you have in the CSS edit window.

  7. designsimply
    Happiness Engineer

    When I pasted the code that thesacredpath gave me, above, I kept getting the error message "Are you sure you want to do that?"

    That sounds like a separate issue. I see that you haven't purchased the Custom Design upgrade yet, but the Preview button should work and also save CSS in preview state. Try logging out, and then log back in and try adding the new CSS again. If you still see an error after that, please let me know.

  8. notchangingmyname
    Member

    thesacreddepth, that worked perfectly! Thanks so much :-)

    Thanks designsimply

  9. notchangingmyname
    Member

    One more question, please. How do I change the form so that instead of it saying "Search" inside the box it says "Search this blog" or whatever I feel like changing it to? thanks!

  10. designsimply
    Happiness Engineer

    That particular text cannot be changed because it is hard coded into the theme by design and there is not a way to update it using CSS only.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags