Search Bar Issue After Move

ghundermark
(@ghundermark)

11 years, 1 month ago
Hi Everyone,

My website is ghundermark.com and I have a newbish CSS question that I hope you can help me with. I decided to move my social media icons and search box into my menu bar. I did so by using this code (…that I came up with using a guess and check method. It seems to be working).
```
/*
social media icons
*/

a.social-media-icons,
#social-media-icons {
position: absolute;
margin-right: 50px;
margin-top: 0;
right: 0;
top: 415px;
z-index: 2;
}

/*
search bar
*/

#header input#s {
position: absolute;
margin-right: 20px;
margin-top: 0;
right: 0;
top: 415px;
z-index: 2;
}
```
While I still need to change the color of my social media icons, I’m noticing that when I click the magnifying glass to search, the box simply overlays the social media icons, as opposed to pushing them to the left (as it is supposed to).

Can anyone tell me how I need to modify that code to make it work properly? Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)

Alexander
(@alexanderbepunkt)

11 years, 1 month ago

Hi ghundermark,

Try to give the search a higher z-index:

#header input#s {
z-index: 5;
}

Please notice, that the responsive design of the theme is not supporting your idea.

Thread Starter ghundermark
(@ghundermark)

11 years, 1 month ago

Thanks Alex! What you suggested doesn’t “bump” the social media icons to the left, but it at least looks better than it did before.

What do you mean by “…the responsive design of the them is not supporting your idea” ?

Thanks again!

Greg

paul.a.cunn
(@paulacunngmailcom)

11 years, 1 month ago

Hi Ghundermark,

I think the problem is in the fact that you used “Absolute” Try using “Relative” instead. You will have to readjust the “Top” and “Right” attributes but I believe that the “Absolute” Positioning is overriding the “Push” effect. “Relative” positioning will move the icons relative to where the should go in the normal flow. Absolute positioning sticks them there for good.

Alexander
(@alexanderbepunkt)

11 years, 1 month ago

The relative positioning of the icons can work for a larger width, but the will fail in the small media (>780px) display, because of lack of space for the icons in the menu bar. And it will also fail in the mobile device media display.

Try this just for experimental reasons:

a.social-media-icons, #social-media-icons {
position: relative;
margin-right: 10px;
margin-top: 0;
right: 0;
top: 45px;
z-index: 2;
}

#header input#s {
position: relative;
margin-right: 20px;
margin-top: 0;
right: 0;
top: 45px;
z-index: 10;
float: right;
}
Thread Starter ghundermark
(@ghundermark)

11 years, 1 month ago
Hello Alex & Paul,

First, thanks for your help thus far. Your willingness to help is very much appreciated.

I applied the changes you suggested, as you will see below, but the white space below my image has returned. Do you have any suggestions for how to get rid of that?
```
@charset "utf-8";
/* CSS Document */

/*
Theme Name:     Pinboard Child
Description:    Child theme for Pinboard
Template:       pinboard
Version:        0.1.0
*/

@import url("../pinboard/style.css");

/*
previous and net links
*/

.single .entry { margin-bottom: 10px !important; }
.prevnext_post { margin: 0 2.5% 5.1%; }
.prevnext_post >div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 50%;
}
.prevnext_post .prev { float: left; padding-right: 10px; }
.prevnext_post .next { float: right; padding-left: 10px; text-align: right; }

/*
bottom margin
*/

#header #searchform {
float:none;
}

/*
left, & right header image margins
*/

#site-title {
margin:0;
line-height:0px;
float:left;
}

/*
top & bottom header image margins
*/

#site-title img {
margin: 0;
float:left;
}

/*
social media icons
*/

a.social-media-icons, #social-media-icons {
position: relative;
margin-right: 10px;
margin-top: 0;
right: 0;
top: 45px;
z-index: 2;
}

/*
search bar
*/

#header input#s {
position: relative;
margin-right: 20px;
margin-top: 0;
right: 0;
top: 45px;
z-index: 10;
float: right;
}

/*
sidebar width
*/

.twocol {
width:33%;
}
```
paul.a.cunn
(@paulacunngmailcom)

11 years, 1 month ago
Hi again,

I get what alex was saying and I agree about the small versions. Currently what is happening is the “Relative” positioning is still preserving the space for the social media icons and the search bar. These images are exactly 32 px tall. So in order to fix this we can shift your menu bar, along with the social media icons and the search bar, 32 pixels up to get this to work out. All you have to do is subtract 32 from the 45 px in both of the “top” attributes for the social media icons and the search bar. The new value will be 13. Then add this snippet to your css for the menu bar
```
#access {
position: relative;
top: -32px;
}
```
This should remove the white space between the header and the menu. However this will create white space between the header and the container so add this to shift that up
```
#container {
position: relative;
top: -32px;
}
```
Hope this does the trick!
Thread Starter ghundermark
(@ghundermark)

11 years, 1 month ago
Hey Paul,

I added both of your code snippets to my current code, but the white space at the bottom was still there. I then deleted your second snippet (#container) and it appeared to work. Any idea why that was?

Here is my current child CSS code:
```
@charset "utf-8";
/* CSS Document */

/*
Theme Name:     Pinboard Child
Description:    Child theme for Pinboard
Template:       pinboard
Version:        0.1.0
*/

@import url("../pinboard/style.css");

/*
previous and net links
*/

.single .entry { margin-bottom: 10px !important; }
.prevnext_post { margin: 0 2.5% 5.1%; }
.prevnext_post >div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 50%;
}
.prevnext_post .prev { float: left; padding-right: 10px; }
.prevnext_post .next { float: right; padding-left: 10px; text-align: right; }

/*
bottom margin
*/

#header #searchform {
float:none;
}

/*
left, & right header image margins
*/

#site-title {
margin:0;
line-height:0px;
float:left;
}

/*
top & bottom header image margins
*/

#site-title img {
margin: 0;
float:left;
}

/*
social media icons
*/

a.social-media-icons, #social-media-icons {
position: relative;
margin-right: 10px;
margin-top: 0;
right: 0;
top: 13px;
z-index: 2;
}

/*
search bar
*/

#header input#s {
position: relative;
margin-right: 20px;
margin-top: 0;
right: 0;
top: 13px;
z-index: 10;
float: right;
}

/*
sidebar width
*/

.twocol {
width:33%;
}

/*
css menu bar support
*/

#access {
position: relative;
top: -32px;
}
```
paul.a.cunn
(@paulacunngmailcom)

11 years, 1 month ago
I still see space under your navigation bar and above your content which appears to be this same 32px. Since the second snippet didn’t work lets try something else. I suggest just subtracting 32 px from your header height. Currently your header is 502 px tall lets just make the height 470 can call it a day. To do this add this css. Since the space is at the bottom it should just chop off the bottom space.
```
#header {
height: 470px;
}
```
Sohag Patel
(@sohag-patel)

10 years, 11 months ago

Hello paul,

I reduced my #header {
height 224;
}

and it reduced the big white space under the menubar
but there is still some and it just doesnt go.

next issue is space between menubar words I would like to reduce this.
Any Idea thank you

Sohag Patel
(@sohag-patel)

10 years, 11 months ago

help with placing social media icons on top of searchbar

paul.a.cunn
(@paulacunngmailcom)

10 years, 11 months ago

Your supposed to start your own thread :). Whatevs please post a link to your site. Cause your problem sounds different than what this thread addresses.

Cheers!

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

10 years, 11 months ago

@sohag, please do not use others’ threads to piggy back off their support.
Continue your own thread and only post in someone else’s thread if you are contributing towards their issue.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Search Bar Issue After Move’ is closed to new replies.