Making bootstrap navigation bar links 'collapse' too soon ?

[c0deM0nK424]

Hi folks, I was wondering what the issue could be here. I am learning the bootstrap framework, and designing responsive websites using it. I have a problem with the navigation bar for a 3 column layout website which im currently designing for a client and I've tried to isolate where I think changes ought to be made to fix everything but im having no such luck.

The issue here is, the navigation menu doesn't 'collapse' in time for the viewport of iPad in landscape mode. 'Contact Us' ends up appearing below the other li items which is not what I'm gunning for to be honest. I'd rather it just collapsed if it couldnt fit the navigation elements in the given screen constraint of ipad in portrait mode. I believe this problem is also occuring in landscape mode as I mentioned above.

I noticed also that the li items, the names of the links are not totaly responsive - in that, the spacing between them don't automaticaly adjust as the screen width decreases. Instead the Bar shrinks, the li items remain a fixed width between each other, and at a breakpoint, it collapses.

What am I overlooking or not looking at here folks ?

here is the test link with the site so far:

http://www.manoj-kumar.co.uk

and i tried to rectify the problem here

http://www.manoj-kumar.co.uk/test2.html

on the 2nd link where ive tried to fix things, ive ended up increasing the padding between the li items and hence why when you view it the menu items are spaced out too far apart.

I had to decrease the gutter widths between the columns which I was successful at doing but trying to shift the menu COMPLETELY to the left, is proving to be a challenge.

As I've only just entered into the world of responsive web design, theres a lot to digest and understand - so using the bootstrap framework means understanding the grid system and making sense out of the css code, so its taking time to fix.

some pointers in the right direction would be greatly appreciated.

 

[vacunita]

Your second link doesn't work for me.

The first one though shows no issues. The menu is shown in its entirety on an iPad in landscape mode.

There is no collapse, or shifting. What browser are you testing this in?

As to understanding responsiveness. My approach has always been to use the least amount of extra css rules to accomplish the responsiveness as possible.
Frameworks like bootstrap make it more difficult than it needs to be most of the time.

Its better to let the regular flow of html elements do most of the work. And only add the rules you need to get things to look right.

Take this template for instance:

http://itnovak.com/~luisbust/templates/template2.html

This is all the code that makes it responsive:

/*******************************************/
/**************** Media Tablet *************/
/*******************************************/
	
	/*******************************************/
	/**************** MENU *********************/
	/*******************************************/
@media screen and (max-width:850px)
{
	div.mainsection div#menu ul
	{
		display:block;
		margin-top:6px;
		max-width:90%;
		border:1px solid #767676;
		border-radius:8px 8px;
		
	}
	div.mainsection div#menu ul li
	{
		color:#f6f6f6;
		float:none;	
		border-bottom:2px groove #4d4d4d;
	}
	div.mainsection div#menu ul li a:link
	{
			height:25px;
			line-height:25px;
	}
	
	div.mainsection div.features div.section
	{
		margin-top:10px;
		margin-left:10px;	
	}
	
	div.mainsection.subfeatures div.features div.contft div.subsection
	{
		width:45%;
	}
	
	div.mainsection.conc div.contactform 
	{
		float:none;
		width:90%;
		margin-left:auto;
		margin-right:auto;	
	}
	
	div.mainsection.conc div.contactform form label input
	{
		max-width:99%;
	}
	
	div.mainsection.conc div.contactinfo
	{
		float:none;
		width:90%;
		margin-left:auto;
		margin-right:auto;
		margin-top:40px;
	}
	
	div.mainsection.conc div.contactinfo div.sect
	{
		width:48%;
	}
	
	div.mainsection.conc div.contactinfo div.sect.mail
	{
		float:right;
	}
	div.mainsection.conc div.contactinfo div.sect.phone
	{
		float:right;
	}
}

/*******************************************/
/**************** Media Phone *************/
/*******************************************/
	
	/*******************************************/
	/**************** splash *********************/
	/*******************************************/
	
@media screen and (max-width:500px)
{
	
	div.mainsection header h1
	{
		
		font-size:40px;
	}
	div.mainsection div.splash div.shortexp
	{
		max-width:80%;
	}
	div.mainsection div.features div.section
	{
		max-width:85%;
		margin-top:30px;
		margin-left:auto;
		margin-right:auto;
		float:none;	
		padding-bottom:30px;
		
	}
	div.mainsection div.features div.section p
	{
	
		padding:0 2%;
		text-align:justify;	
	}
	div.mainsection.subfeatures div.features div.contft div.subsection
	{
		float:none;
		width:96%;
		margin-left:auto;
		margin-right:auto;
		border-bottom:1px solid #e2e2e2;
		border-radius:0 0;
	}
	
	div.mainsection.conc div.contactinfo div.sect
	{
		width:98%;
		margin-left:auto;
		margin-right:auto;
		float:none;
	}
	
	div.mainsection.conc div.contactform form input.res
	{
		margin-top:20px;
	}
}

Most of it just adjusting element widths for the smaller screen. But only to make them fit the screen. There's pretty much no extra positioning or changes in how the elements get displayed.

Everything else relies on on the natural behavior of the html elements when screen sizes change.










----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech