Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Vlad Legkowski
Vlad Legkowski
9,882 Points
Posted by Vlad Legkowski
Vlad Legkowski
9,882 Points

Collapsible navigation issue

Hi guys,

Please can someone tell me how to fix bellow issue:

http://codepen.io/anon/pen/NNWBdR - here you will find my navigation bar, which worked as I wanted until the moment I set the margin in ul.topnav {} to 0 350px 0.

If you update this margin to 0, and make a window smaller, you will see the effect i achieved before, but once i applied margins, the collapsible effect went missing.

Hope someone can help, or offer different solution.

4 Answers

Ihor Zhuk
Ihor Zhuk
13,263 Points
Ihor Zhuk
Ihor Zhuk
13,263 Points

In order to centre something that is not floating just use 'margin:auto'. If you want to center block element as in your case, you should also specify some particular width, because by default block element is 100 % wide.

As I notice there are two elements with class .topnav. If you want to center first of them just add to it a new class .center and specify fowling rules

.center {
   width:70%;
   margin:  0 auto;
}
Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Ihor, that worked, but the 15% on each side lost their background colour value, any idea how i treat it?

Ihor Zhuk
Ihor Zhuk
13,263 Points
Ihor Zhuk
Ihor Zhuk
13,263 Points

I don't see background color issue. Check out the PEn http://codepen.io/docode/pen/reNrJK

Ihor Zhuk
Ihor Zhuk
13,263 Points
Ihor Zhuk
Ihor Zhuk
13,263 Points

Hello!

Why do you set the margin for? Do you want to make .topnav narrower and centre it?

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Hi Ihor, yes, this is what i want

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Strange, yes, its not there but on the brackets...

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Ihor, probably made mistake following your instructions! Now all works perfectly, thanks!