I've been trying to get the Buildr mobile toolbar to not take up too much space - in it's default form it took up nearly half of the screen of an iPhone 5. I've set up a mobile logo and made some code adjustments to get the Menu trigger box to display alongside the mobile logo instead of underneath it.

The issue I now have is that the whole top toolbar overlaps the content beneath it, presumably because it's assuming there will be some content in a position I'm not using or something? It looks like this on a page with a single Joomla article:

https://www.dropbox.com/s/foglj8eqp4q6kiq/Screen%20Shot%202016-09-12%20at%2014.23.14.png?dl=0

Then when you start to scroll it becomes transparent and reveals the content which it is overlapping, but of course it's still hidden behind the transparent toolbar:

https://www.dropbox.com/s/nb7tslrx1p06ejy/Screen%20Shot%202016-09-12%20at%2014.23.31.png?dl=0

I'd like the toolbar not to overlap anything, but can't see a setting or code adjustment to make this happen. Any suggestions?

The site is here: www.stsilas.org.uk/

Many thanks in advance.

Hi

I don't have an iphone handy at the moment do you see the same issue on any other device you have?

Cheers
Paul

It's not really an iPhone issue, it's just how the website adapts to smaller screens. You can see the same issue by resizing the browser window.

Thanks.

Hi

Adding this to your custom.css should provide a workaround for you.

#toolbar.zen-row-wrap {
position: inherit;
}

There may be a more elegant solution lurking within the setting and layout position, and Paul may well help you further with it by delving into that aspect. In the meantime I hope the above helps on the site.

Regards Ian

I couldn't seem to see the issues with resizing the window

Does the solution suggested by Ian do the trick?

thanks
Paul

Thanks Paul, Ian's CSS tweak did the business, all working as required now.

Ian - many thanks, that was very much appreciated!

Thanks Guys

Thanks again Ian