The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Putting Search Bar In Sticky Navigation - Total Noob
ithi
post Aug 20 2016, 09:05 AM
Post #1





Group: Members
Posts: 2
Joined: 20-August 16
Member No.: 24,665



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 20 2016, 06:09 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.)

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 20 2016, 08:39 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 11:11 AM