Forum Support

Shape 5
March 28, 2024, 04:08:40 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Remove space between the logo and menu  (Read 775 times)
marleyman
Jr. Member
**
Offline Offline

Posts: 171



« on: October 16, 2015, 06:54:53 AM »

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!
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: October 16, 2015, 07:49:25 AM »

Hello,

Adding this to custom.css would do this:

#s5_content_body_wrap {
top:100px;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
marleyman
Jr. Member
**
Offline Offline

Posts: 171



« Reply #2 on: October 16, 2015, 07:53:07 AM »

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
Logged
marleyman
Jr. Member
**
Offline Offline

Posts: 171



« Reply #3 on: October 16, 2015, 07:56:31 AM »

Hello,

Adding this to custom.css would do this:

#s5_content_body_wrap {
top:100px;
}

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
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #4 on: October 16, 2015, 12:41:52 PM »

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
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.