CODEWITHSUNDEEP
jquerycssresponsive-design
TrapezeArtist
TrapezeArtist

Reputation: 907

Formatting a Responsive Menu (jQuery) with CSS

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?

Upvotes: 0

Views: 373

Answers (2)

B R
B R

Reputation: 169

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

Upvotes: 0

MattP
MattP

Reputation: 2863

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/

Upvotes: 2

Related Questions