Sticky header takes up whole screen on mobile

Question

Here is my site - http://soundboycrew.co.uk/

When I reduce the screen size the sticky header doesn't optimise well at all. The header takes up the whole screen.

I'm using Wordpress and a theme called Lane (Which I think is made using Bootstrap). The demos show good optimisation, but I believe something is messed up.

Is there any way I can add some custom css to resolve this issue?

Any help will be much appreciated.

Answer 1

I think the problem are fixed sizes. If you want it to be responsible use ems in opposite to px. The same applies to property 'right' in media queries which positioning collapsed navigation. To place elements horizontally change size of bootstrap columns. For example:

<div id="logo" class="navbar-header col-md-2 col-sm-3 col-xs-12"></div>
<div class="email_phone col-md-5 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-sm-3 col-xs-12"></div>

and in

@media only screen and (max-width: 991px)
  .responsive #logo {}

delete

margin-left: 15px;