Move search box (widget area)

abbzah · Member · Jan 16, 2012 at 5:18 pm
Copy link

Add topic to favorites
Hi,

I have been playing with css customisation for the first time, on my blog, disseminus.wordpress.com

I have aligned the primary navigation menu horizontally however I cannot seem to get the search widget in alignment with this menu line.

I have tried absolute positioning but this is not ideal as I found it keeps moving the widget area when the browser is resized.

I would appreciate help with this.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 16, 2012 at 6:08 pm
Copy link
Add this to your CSS and you can play with the “top” position value.
```
#header-right {
position: relative;
top: -25px;
}
```
abbzah · Member · Jan 16, 2012 at 6:32 pm
Copy link
Thanks a lot I’m a real novice at this CSS stuff.

Can’t believe I didn’t think to do that! Guess that’s why you do what you do :)

Do you also have a solution for bringing up the line after which the posts start?

and last but not least (for now) is there a way of having the theme display posts in more of a defined grid pattern. i.e. by cropping the featured images and controlling the excerpts?

Thanks again
thesacredpath · Member · Jan 16, 2012 at 6:44 pm
Copy link
Bringing line below nav up.
```
#header {
height: 260px;
}
```
To do a defined grid pattern would require editing the PHP script files and a good bit of experience with PHP and we cannot do that here.
abbzah · Member · Jan 16, 2012 at 7:13 pm
Copy link
Thanks for that, it did help moving the line but it made it fixed so that it would not move down to accomodate the sub-menus. So I may just leave it how it was before if theres not a way around that.
abbzah · Member · Jan 16, 2012 at 7:25 pm
Copy link
Oh and I can’t seem to figure out how to move the clickable area (directing to the homepage) where the old header/logo would have been on the left, to a more central location where the logo is now.

Thanks once again for the help
designsimply · Member · Jan 16, 2012 at 8:29 pm
Copy link
To fix the issue with the submenus changing the height of their container element, change this:
```
.menu ul ul {
  left: 0;
  position: relative;
  width: 50px;
}
```
To this:
```
.menu ul ul {
  left:0;
  padding-top: 10px;
}
```
And add this:
```
.sub-menu li {
  clear: both;
}
```
To shorten up the header, try adding this:
```
#header-left {
  height: 10px;
}
```
To move the search box back into the right place, change this:
```
#header-right {
  position:relative;
  top:-37px;
}
```
To this:
```
#header-right {
position: relative;
bottom: 0px;
}
```
designsimply · Member · Jan 16, 2012 at 8:36 pm
Copy link
To change the clickable bit in the header area, do this:
```
#header-image-link {
  height: 190px;
  width: 960px;
}
```
designsimply · Member · Jan 16, 2012 at 8:38 pm
Copy link
I noticed you changed your menu around a little after your last post, so you may need to adjust whatever you did back to make my example CSS work.
abbzah · Member · Jan 17, 2012 at 2:25 am
Copy link
Thank you for your help,

The header thing worked a treat.

However I think I may not have made it clear that I actually want to keep the ability for the menu to change the size of it’s container. However I just don’t want there to be such a large gap between the menu and the horizontal line below. Other then that gap I would like everything to remain as is.
designsimply · Member · Jan 17, 2012 at 3:27 pm
Copy link
Oh, if you do it that way, it looks like a bug to me! :)

If you want to keep the menus how they are so that they push down the main content when submenus open and also shorten up the header area, add “height: 1em;” to the #header-right block in your custom CSS.

If I were you, I’d anchor the search box to the right side of the menu. You can do that with a little positioning like this if you want to try it instead of the suggestion to make #header-right 1em tall:
```
#header {
  position: relative;
}
#header-right {
  position: absolute;
  top: 200px;
  right: 0;
}
```
abbzah · Member · Jan 17, 2012 at 5:52 pm
Copy link
Thanks, I went with the latter option and it works well. It seems one persons’s bug can be another’s cool feature.

Another thing I was wondering is if there is a way to make the sub menu lists a bit more spaced out. I tried adding something like this:

.menu ul ul {
padding-top:3px;
}

But that did not work, although it does show probably how ignorant I am when it comes to CSS.

Thanks again for all your help.
abbzah · Member · Jan 17, 2012 at 6:01 pm
Copy link
Oh and is there a way to make it so that when people click a link within a post it opens in a new page?

Also for the same thing to happen when somebody clicks a link to a post from the main page?
designsimply · Member · Jan 17, 2012 at 11:15 pm
Copy link
To make the submenus a bit more spaced out, try this:
```
.menu ul ul li {
border: none;
  padding-bottom: 3px;
}
```
designsimply · Member · Jan 17, 2012 at 11:17 pm
Copy link
There is not a way to adjust the links for post titles to open in a new page because WordPress.com does not offer a way to edit that. However, you can make a link that you create open in a new window by checking the box that says “Open link in new window/tab” when you add the link. See step 3 here for an example: http://en.support.wordpress.com/links/

No items found.