INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Making bootstrap navigation bar links 'collapse' too soon ?

Making bootstrap navigation bar links 'collapse' too soon ?

Making bootstrap navigation bar links 'collapse' too soon ?

(OP)
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.

RE: Making bootstrap navigation bar links 'collapse' too soon ?

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.h...


This is all the code that makes it responsive:

CODE

/*******************************************/
/**************** 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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close