put the menu button to the left

  • Resolved catcher10lp

    (@catcher10lp)


    11 years, 1 month ago

    Hello guys,
    how can I put the menu button in the mobile version to the left site. I already deleted the background of the menu an tried this code which didn’t work:

    @media all and (max-width: 768px) ; (min-width: 600px) and (max-width:800px); (max-width:600px); (min-width: 320px) and (max-width:568px); (min-width: 320px) and (max-width:480px); (max-width:320px); (min-width:240px) and (max-width:320px); (max-width:240px); {
navbar. nav. {
margin-right: 100px;
}
}

    Thanks ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • @media all and (max-width: 768px)  {
.navbar-inner .btn {float: left;}
.navbar-wrapper .social-block  {float:right;}
}

    This switches social icons/menubar in viewport <769px. You need to check that your @media statements don’t conflict.

    Thread Starter catcher10lp

    (@catcher10lp)

    Thanks, but it’s still not perfect :/
    the drop downmenu is still displayed on the right side and the menu button isn’t displayed completely.
    This is my site: https://immanuelinternationalev.comlu.com/

    There is one more other thing: I don’t really know why but in the desktop version as well as in the mobile version is a stripe from the top to the buttom on the right side of the site. Would be glad if you could help me out with this, too.

    Thanks ??

    The stripe can be removed with:

    #left.widget-area, #left.widget-area:after {
  border-right: medium none;
}

    To correct the button position, change your customcss for @media max-width 1000px to:

    .navbar-wrapper .social-block {
  margin-left: 100px;
}

    ie remove the float:right;

    To fix the dropdown:

    .nav-collapse, .nav-collapse.collapse {
  position: absolute;
  right: 460px;
  top: 42px;
  width: 210px;
}

    You’ll need to adjust in different @media.

    Thread Starter catcher10lp

    (@catcher10lp)

    Thanks ??
    …but the drop-down-menu is still on the right :/

    Try:

    .nav-collapse, .nav-collapse.collapse {
  position: relative;
  left: 60px;
  top: 0;
  width: 27%;
}

    and change the -50px in customcss margin/top to:

    .navbar .nav {
top: 0px;
margin: 0px;
}

    Thread Starter catcher10lp

    (@catcher10lp)

    It’s almost done! ??
    There is one “little” thing.. The first two menu points aren’t displayed in the drop-down :/

    You’re a genius ??

    Thread Starter catcher10lp

    (@catcher10lp)

    I found the mistake… I had to do the -50px only only for the dektop version ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘put the menu button to the left’ is closed to new replies.