0

Working on re-creating a clients old template that was built using tables. I'm using bootstrap and haven't used it in quite some time and have a question about the navigation menu. When you resize it the positioning is way off from where it would be when looking at it on the desktop.

Could someone with experience in bootstrap help me troubleshoot how to get the mobile menu to line up in the blue bar as it does when viewing in desktop.

I'm sure it is something simple I am missing, and I have not messed with media queries yet which I assume is where I need to start.

You can view the template here.

Siguza
  • 21,155
  • 6
  • 52
  • 89
Michael J Froseth
  • 35
  • 7
  • You need to put `.img-responsive` on your logo and remove the blue bar from that image. – isherwood Jun 03 '15 at 15:22
  • I'd back up a bit and restructure with something closer to Bootstrap's demo. You probably don't want your navbar inside columns at all. Maybe position the full menu absolutely to set it over the blue bar. – isherwood Jun 03 '15 at 15:30
  • You shouldn't need to get into media queries. Use the classes that Bootstrap applies to target your menu at different sizes. – isherwood Jun 03 '15 at 15:31
  • If I position it absolute, how will that be affected in mobile though? Or do I use media queries for that? – Michael J Froseth Jun 03 '15 at 15:31
  • Or, do any of you know of a off-canvas menu that would display in mobile only? I'm limited by the graphics they provided me as they don't have any actual logo files, so I'm stuck with the one with the blue background, etc... – Michael J Froseth Jun 03 '15 at 15:33
  • I might be wrong. I don't see a class on a wrapper element that you can target. Use `@media (min-width: 768px) {...}`. – isherwood Jun 03 '15 at 15:35

1 Answers1

0

After taking a good look at your website, there are two things blocking the bootstrap responsive properties: your image in the body the logo.

change your image in the body from this: 

<img src="http://greenetzconstruction.com/_images/100402_home.jpg" class="intro-pic">

to this: 

<img src="http://greenetzconstruction.com/_images/100402_home.jpg" class="intro-pic img-responsive">

For the logo, you can add it to the bar as a navbar brand image. Apart from the bootstrap documentation, you have this navbar brand image - stackoverflow question to help you with that.

You might also want to add class img-responsive to your logo: 

<img src="./img/dave-greenetz-logo_02.jpg" class="img-responsive">

This is what your website looks like when i add img-responsive to your images(horizontal-scrolling is gone):

enter image description here

Community
  • 1
  • 1
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50