Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Help me with bootstrap mobile menu

Hi,

When you look at this website , and you go on mobile, theres a gap on the left you can see that this is a piece of block, there the hamburger menu is, on the left its doesnt look right. It has padding 15px or something.

How can i fix that?

Thomas Workman
Thomas Workman
7,173 Points
Thomas Workman
Thomas Workman
7,173 Points

Hey Konrad,

One thing I wanted to point out is that your slick.css and slick-theme.css files didn't load for me and was seeing a 404 in the console, so not sure if you have custom styles that aren't being applied here.

However, looking at your source, I see that you are using Bootstrap's .container inside of .container-fluid inside your navbar. I recommend just using .container-fluid. Note that if you do, you will want to make some adjustments to your header content.

For reference, here's how the containers work in Bootstrap: http://getbootstrap.com/2.3.2/scaffolding.html#layouts

Also, check out how Bootstrap has their examples setup: http://getbootstrap.com/2.3.2/getting-started.html#examples.

Hope this helps.

1 Answer

Tatiana Perry
Tatiana Perry
17,156 Points
Tatiana Perry
Tatiana Perry
17,156 Points

That is a built in boostrap style. Without seeing the actual CSS I can't give an exact way to fix it. Some suggestions: You can add it into a custom stylesheet and overwrite the style. Also note that if the styles are the same in 2 stylesheets, it will apply the stylesheet loaded last.

This is the css in boostrap that controls the navbar right margin. 

.navbar-toggle{
   margin-right: 15px;
}

.navbar-toggle{
   margin-right: 0px;
   float: left;
   ......
}