Formatting a Responsive Menu (jQuery) with CSS

Question

I am evolving a top navigation menu which will provide a different layout for fullsize screens and mobile screens. This intended to follow the usual convention of reducing the menu to a single full-width button on a mobile, and clicking that button will dropdown the menu choices.

Broadly, it is working well but I am having a problem getting the formatting right. The full width version is fine (mid-grey for each button and a slightly darker grey on hover). However in the mobile version, it appears that the first menu item ("HOME") displays the .nav format and all the others display the .nav li or .nav li a formatting.

I supect that it is the jQuery that is the problem, but not sure.

$(document).ready(function(){ 
    var touch   = $('#touch-menu');
    var nav     = $('.nav');

    $(touch).on('click', function(e) {
        e.preventDefault();
        nav.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 767 && nav.is(':hidden')) {
            nav.removeAttr('style');
        }
    });

});

Here is a jsfiddle to show the problem.

How can I make all the menu lines look the same?

If it's a formatting issue, it's not the Jquery. Compare teh styling of the .mobile-nav a to your normal nav li a and see if there are any differences. — Paulie_D
– Paulie_D, Commented Feb 27, 2014 at 12:14
You're using jQuery for checking the width of window and CSS @media both together; Why? — Hashem Qolami
– Hashem Qolami, Commented Feb 27, 2014 at 12:17

MattP · Accepted Answer · 2014-02-27 12:21:27Z

2

It's because you specified the height of the ul item .nav

It will work if you remove the height and set overflow: hidden to get the background colour to fill the nav.

.nav{
     display:block;
     list-style-type:none;
     margin:0;
     padding:0;
     overflow: hidden;
     font:12px Geneva, Arial, Helvetica, sans-serif;
     background:#ccc;
     border:1px solid #999
}

http://jsfiddle.net/RZs49/3/

answered Feb 27, 2014 at 12:21

MattP

2,8732 gold badges33 silver badges43 bronze badges

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

4 Comments

Hashem Qolami Over a year ago

You might want to note that this happens because of floated list items.

TrapezeArtist Over a year ago

I've accepted the answer of @MattP. It's not quite the end of the story though because overflow:hidden stops the sub-menu from working. There are still some issues with borders, but I'll work on it. Thanks, All.

TrapezeArtist Over a year ago

I'll also look into the comment from @Hashem Qolami to see if that has any bearing on things.

MattP Over a year ago

The overflow:hidden was really to make the background colour work, consider moving the background colour to the .nav li

B R · Accepted Answer · 2014-02-27 12:28:01Z

0

Also, if you add text-align: center; to the .mobile-nav class, then the "Menu" in the mobile version will align properly.

answered Feb 27, 2014 at 12:28

B R

1693 silver badges13 bronze badges

3 Comments

TrapezeArtist Over a year ago

"Menu" was only thrown into the jsfiddle to save having to link to a graphic. Having said that, I did start off with the word "Menu" in there as well and my problem (unsolved, as yet) was vertical alignment, not horizontal.

B R Over a year ago

I removed the height (39px) from .mobile-nav and changed your padding setting to 14px 2%, That gave me perfect vertical alignment. Hope that helps!

TrapezeArtist Over a year ago

@B R, that works with text on it's own but unfortunately not when the text has to share space with an image. The text is then forced to the bottom of the mobile-nav space. I do find that alignment in CSS is a dog's breakfast.

Collectives™ on Stack Overflow

Formatting a Responsive Menu (jQuery) with CSS

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related