Docs

[mrsnooch]

Hi,

Regarding site http://bigrockdesigns.badwolfproductions.co.uk/ , there seems to be some kind of white space behind the mobile menu. I am able to drag down with my finger once the site loads, which shows the white space in behind. If I let go, this space remains.

I believe this is having an issue with the landscape version of the site – rotating the device shows a large area of white under the menu.

Please note, I have a 1px high bar of #009ee0 that sits underneath my navbar in CSS, but this is hidden on mobile – I have attached a screenshot of how it looks without the additional code to hide it.

/*Adds blue border to bottom of nav bar*/
.x-navbar {    border-bottom: 1px solid #009ee0; }

The placement of the blue line would indicate that the logo is spilling over the menu (An issue with Shiftnav, so that is fine), but there is still unnecessary white space below this blue bar and I don’t know where it is coming from.

Hopefully this makes sense.

Many thanks
Mark

[mrsnooch]

This reply has been marked as private.

[Friech]

Hi Mark,

Thanks for writing in! This was the block that is causing the issue.

/*Adds margin to allow for topbar on desktop site*/
.x-main.full {   margin-top: 106px; }

Please update that to:

/*Adds margin to allow for topbar on desktop site*/
@media (min-width: 980px) {
	.x-main.full {   margin-top: 106px; }
}

So it wont affect the mobile view. And yes your logo overflow from the navbar.

Hope it helps, Cheers!

[mrsnooch]

Hi Friech,

Thanks for your message.

I was able to reduce the margin but it hasn’t fully disappeared, or this is possibly another bit of white space. Now on tablets I have a thin horizontal bar of white space between the blue ‘topbar’ and the first image on the page, but cannot identify where it is coming from either through the CSS or via Chrome developer tools.

Can you assist with the removal of this?

It doesn’t display on phones, only tablets.

Thanks
M

[Friech]

Hi There,

That is the navbar, apparently you just hide what’s inside it but not the navbar container. Please add this on your custom CSS.

@media (min-width: 768px) and (max-width:  1200px) {
	.x-navbar-wrap {display: none;}
}

Hope it helps, Cheers!

[mrsnooch]

That’s it Friech, many thanks!
M

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks. 🙂

[Author]

Posts