Shape 5

Hi,
I need to remove the space between the logo and the menu, so that the logo and the menu are "touching".

http://173.199.129.165/~etownpolice/

I've tried everything but cannot figure it out.

Also when I reduce my browser window and make it small to simulate a mobile screen, there is a huge space underneath the logo that I need to remove as well.

Thank you very much!

Hello,

Adding this to custom.css would do this:

#s5_content_body_wrap {
top:100px;
}

Solved thank you!

I've had this issue with with other Shape5 Templates before but I can't remember how to fix it: When you shrink your browser window the scrolltop arrow is in the middle instead of staying at the bottom of the window. Can you tell me how to fix this again? thanks

I spoke too soon. This solved it for large screens but when you shrink your screen down smaller, like a mobile device screen, that space is still there.
How can I fix that? thanks

Hello,

I don't see anything wrong with the scroll arrow on the site. It is showing on the right side where it is supposed to in a fixed position (it scrolls with the page). It is not designed to only show at the bottom, if you want it at the bottom you would need something like:

.s5_scrolltotop {
position:absolute;
bottom:32px;
}

The issue at the top is because you are using this template in a way it was not designed for. It is designed to overlay a background image, and that is why there is initially a large gap at the top. The entire layout is designed for overlaying a large image, but you are using it for something different.

Additionally, your menu is too large. The width of your menu will only work on very large screens, anything smaller than probably 1200px will force the menu on to a second row. I would recommend consolidating your menu so it fits on other screen sizes better. Some css that might help is:

#s5_menu_wrap {
height:auto;
}

That will allow it to go to a second row but it will not look good when the menu goes to floating, so if you need the menu that wide I would turn off the floating menu under Main/Menu

The header of this template is meant to overlay the top image, and you are not using a top image, because of that the top area will show over top of the body. Something you could add to overcome that is this:

#s5_content_body_wrap, #s5_header_area2 {
position:static;
}

#s5_top_area_bg {
display:none;
}

What those calls would do is align the divs on top of each other, and it basically removes the default function of the body trying to overlay a large background image.

Any css mentioned here would go in custom.css