Extra padding appearing on menu

darkstorm86 · November 2015

Hi,

On my website www.ctdots.co.uk, when I visit a page different to the homepage there's additional top-padding on the menu add a lot of black space;

But on the homepage the menu looks perfect (see below) - pls can you tell me how to fix this so the menu consistently has the same padding above and below the text? Thanks

Albert · November 2015

Hi,

you can remove this padding with below css:

body.header-below:not(.template-slider) #Header { padding-top: 0 !important; }

darkstorm86 · December 2015

Thanks! That worked

Albert · December 2015

You're welcome

darkstorm86 · December 2015

Hey,

I'm having a similar problem with the mobile version of the site now, see the screenshot below. You'll notice there's lots of extra black space for the menu. Pls could you advise how to fix? I'd like the padding underneath the logo to be the same as the padding above the logo on the menu.

Thanks

Albert · December 2015

You can remove that padding with the following css:

body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }

darkstorm86 · January 2016

Great! Thanks

Two last questions:

1) do you know why the footer isn't at the bottom of the screen for the 'about' and 'contact' section? if you check every other page

2) On the homepage in mobile mode, when you click on the menu icon, because the menu is on the bottom of the screen, the menu loads below it. Which means that you have to scroll down to see the menu items. Is there a way we can have the menu bar sit on the top on the mobile site homepage but stay on the bottom for the desktop site homepage?

Thanks

Albert · January 2016

1) It's not in the bottom because you don't have enough content on that page. However, you can sticky footer to bottom under Theme options > Footer section.

2) This is how "Header below slider" works. You can not change this behave unfortunately on mobile only.

Extra padding appearing on menu

Comments