responsive navigation bar using jquery

Question

I have a navigation bar which I want to make responsive...when the user resizes the window and the width is less than particular value, the padding of <a> tag should change accordingly to accommodate all the <li> elements within the current window width...here's my jsfiddle in my example if we make width of widow less than 390px the last elements are coming down...I want to make such that when user goes resizing width of window when its less than 390px, the elements should start getting smaller, may be by changing their left and right padding.... so that it will become responsive...I am using jQuery.... How can I achieve this?

Please post your problem code, jsfiddle links will get downvoted: meta.stackexchange.com/questions/84342/… — Lowkase
– Lowkase, Commented Apr 4, 2013 at 18:36
I have only html tags and css...and using jsfiddle I can show you what I am doing — vikas devde
– vikas devde, Commented Apr 4, 2013 at 18:38
@vikasdevde the reason why we want you to post the code here in your post is so that it is easy to see, and future visitors will be able to access it. You can still post the JSFiddle as a supplement. — Chris Bier
– Chris Bier, Commented Apr 4, 2013 at 18:40
Sorry I should have been more explicit in saying that you can post jsfiddle links but you need to post the problem code as well. If jsfiddle ever closes up shop this question will become invalid. — Lowkase
– Lowkase, Commented Apr 4, 2013 at 18:41
You are right. I will keep in mind next time I ask question... — vikas devde
– vikas devde, Commented Apr 4, 2013 at 18:42

Lowkase · Accepted Answer · 2013-04-04 18:40:05Z

1

Use media queries in your CSS, jQuery is not necessary in this instance:

http://jsfiddle.net/5kNgy/2/

@media only screen and (min-width:0px) and (max-width:390px) {        
    .hor-menu ul li a {padding:2px;}
}

answered Apr 4, 2013 at 18:40

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vikas devde Over a year ago

thanks...Lowkase...but is there a way using jquery, we can make a smooth transformation

Moby's Stunt Double Over a year ago

Vikas, you should look into Twitter Boostrap. twitter.github.com/bootstrap/scaffolding.html#responsive You could end up reinventing the wheel here... Just a thought.

Lowkase Over a year ago

You can use CSS3 transitions in each media query to show effects when the new CSS is rendered. CSS Media Queries is the best way to go about what you are asking for. You can do this in jQuery, but it's going to get real sloppy the bigger your template and website get.

Moby's Stunt Double · Accepted Answer · 2013-04-04 18:41:30Z

1

@media (max-width: 390px) 
{
    .hor-menu ul li a { padding: 0 0 0 0 !important; }
}

I think this is what you are attempting to do?

answered Apr 4, 2013 at 18:41

Moby's Stunt Double

2,5401 gold badge18 silver badges32 bronze badges

Collectives™ on Stack Overflow

responsive navigation bar using jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related