CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
Alex
Alex

Reputation: 2062

CSS responsive navigation menu expanded by default

Im building a responsive navigation menu for my site. I have here quite few problems im not able to figure out since im new to web design.

There's a logo on the left side of the header and the menu on its right. When resolution is less than 750 px, a media query kicks in and launches a mobile design.

What i want:

  1. the full nav bar should disappear and only the black arrow should remain in place ALONG with the logo (on the left) in the SAME line.
  2. the responsive menu should be expanded once user clicks on the black arrow.
  3. the items (li elements) should be in the left corner of the screen.
  4. the logo should be in the same line with the black arrow all the time.

what is happening:

  1. once i re-size the screen (resolution<=750px) the nav bar in expanded by default (not triggered by click).
  2. the logo skips to the next line and located beneath the arrow.
  3. items not aligned to the left side (somewhat stuck in the middle)
  4. im not able to control the logo's position (neither margin nor padding affect its position).

Here's a demo: http://jsfiddle.net/NYQnh/

This is the mobile query CSS code:

   @media screen and (max-width: 750px){
   nav ul{
       max-height: 0px;
   }

    .showing{
        max-height: 15em;
    }

    nav ul li{
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        text-align: left;
    }

    .nav_arr{
    display: none;
    }

    nav li:before {
        content: "";
        padding: 0px;
    }

    .handle{
        display: block;
        padding-bottom: 0px;
    }

}

please advise

Upvotes: 0

Views: 2743

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

1.) You already have the class showing added in your html <ul class="showing">, therefore the nav is expanded on default. Remove the class to make it work.

2.) The Logo is moved to the next line, because of the margin of the navigation. Add 

.nav_menu {
  margin-right: 5px;
}

to your media query.

3.) Which "items" do you mean?

4.) Giving the Logo a padding, works for me..

#logo {
    padding: 5px;
}

Working Fiddle

UPDATE

I updated your fiddle with the missing styles. I also moved the handle element in your HTML out of the nav element, to be more flexible. But this shouldn't cause you any trouble, since it is just used in the responsive version.

Btw: you were not able to change the logo's position, because you targeted the class .logo in your CSS, but your logo has a ID #logo..

Working Fiddle 2

Upvotes: 1

Related Questions