Responsive Problems for Menu & Bootstrap col-md-6

[ontargett]

http://www.ontargettdesign.com

Hi,

I have always used the same code to make the main menu toggle. I have used the same code on here but the menu isn’t toggling like this website:

http://www.markjamesgolfcoaching.co.uk

I am using bootstrap on this. The other peoblem I have is that my slideshow images are split into two cod-md-6 divs, and these screw up when on a mobile device. Could someon let me know how to have these appear underneath one another on the page on a smaller device?

I know this is a big ask but it’s driving me nuts!

Thanks in advance

[ralphm]

Your style.css file lacks the button styles that the other site has. E.g.:

.navbar-toggle {
	background: #fff;
	border: none;
}

.navbar-toggle .icon-bar {
	background: #000;
	box-shadow: none;	
}

.navbar-toggle:focus, .navbar-toggle:active {
background:#fff;
}

[ontargett]

Ok fantastic, thankyou not sure how I missed that.

But I am now finding that when the button is pressed there are no menu items that appear beneath it? Sorry if this seems trivial!

[ralphm]

Because you have a slider in there, you’ll need to add some styles to make the dropdown overlay the slider. E.g.

.navbar-collapse {
  position: relative;
  z-index: 20;
}

[ontargett]

I have tried this but now the menu disappears all together.

The toggle feature works fine on this example http://www.markjamesgolfcoaching.com I feel that there may be a problem with http://www.ontargettdesign.com as I have two col-md-6 divs in the slideshow (the image of the macbook and the description next to it), would this affect the way the navbar behaves in terms of not appearing?

Thanks in advance

[ralphm]

@ontargett

now the menu disappears all together

Not really. At certain viewport widths it gets hidden in certain ways, but it’s there (if you widen/narrow the browser. There’s just a lot more styling to sort out.

[ontargett]

Thanks for all your help I have styled this now and found that the problem was that I had set a fixed height to the header of 80px which meant the menu would display in the way I wanted it to.

This can be closed now if you want