Hamburger Menu

HTML & CSS
1
  1. So here what I want is to hide class logo in big screen and want it to be visible in small screen, position will be same.
  2. And I want class menu to be floated left so I need to applied float left if I’m right
    These are the changes I wanted. I’m newbie so if anyone could help me it will be my pleasure
    https://codepen.io/mutedblues/pen/MmPNPG
Sticky position
2

Just hide it in your existing media query for the large screen and then float the menu to the left.

 .header .logo{display:none}
  .header .menu{float:left}

e.g. Put that at the end of your large screen media query.


@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .header .logo{display:none}
  .header .menu{float:left}
}

Note that floats are seldom used these days and you would be better upgrading to flexbox as it is more flexible and doesn’t have the same float bugs and behaviours.

1 Like
3

image
image495×681 22.4 KB

Other stuff worked except the class logo. What I wanted is to CSS NAV should appear (left side) on the small screen

5

OK issue is resolved Paul Thanks mate :smiling_face_with_three_hearts:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.