Help - Search - Members - Calendar
Full Version: Putting Search Bar In Sticky Navigation - Total Noob
HTMLHelp Forums > Web Authoring > Web Site Functionality
ithi
Hi there, I am new here. Nice to meet you all!
I am hoping someone can help me. I'm a real noob with this kind of stuff and I sort of make do with what I can...

I recently managed to add a sticky navigation bar to my blogger http://ithinitybeauty.com and I am quite pleased about it but as you can see the search bar goes straight underneath, if possible I'd like to try and get it to the right side of the sticky bar, after the social media icons.


I really don't know much about this stuff so I am hoping someone can help me and I wont have to change too much because I don't want to risk messing it up.

Thank you so much in advance if anyone can help me! <3
Christian J
QUOTE(ithi @ Aug 20 2016, 04:05 PM) *

Hi there, I am new here. Nice to meet you all!

Hi!

QUOTE
I recently managed to add a sticky navigation bar to my blogger http://ithinitybeauty.com

How did you add it? Some sort of plugin, or by rewriting the actual HTML?

(Afraid I can't help with blogs either way, but knowing how it's put together may help others suggest the best solution.)

pandy
Well, the search box is where it should be in the HTML. But FORM is a block level element so it will break the line. See http://htmlhelp.com/reference/html40/block.html .

I thought this would fix it (added to your style sheet).

CODE
#searchbox  { display: inline-block; margin: 0; padding: 0 }


And it sort of does. Only the search box hangs down a bit. The margin and padding set to zero is just to play it safe, since browsers always use one or the other on FORM.

You can sort of fix it by nudging the box up a bit.

CODE
#searchbox  { display: inline-block; margin: 0; padding: 0; position: relative; top: -1.3em }


But I would rather find out why it's dropping down. I don't see it right off, blogger is rather messy and it's time to sleep. I'll have a new look tomorrow if you or someone else haven't found the reason by then. The box is where you want it horizontally anyway.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.