Responsive menu

Hi, 

I
would like to change the menu default breakpoints. At the moment, menu switches
to mobile mode only if viewport is below 480px. I would like it to switch when
the viewport is below 1000px.

Can
you provide me the exact code to use? 

Regards, 

Fede

Comments

  • Hi 

    Add this given custom css code in theme custom css box 

    Appreance >> customize >> header settings >> custom css 

    @media (max-width:1000px) {
    .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        
        .navbar-nav {
            float: none!important;
            margin: 7.5px -15px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }

    .navbar-collapse.collapse.in{
        display: block!important;
    }
    }

    Let me know did it work.

    Thanks
    A
  • I tried the code but it didn't worked.

    Below is a screenshot (viewport under 1000px)

    The menu toggler appears as expected, but the menu items appears as well even if the toggle hasn't been pressed. 
    Screenshot_3.png
    869K
  • Hi tdgroup

    kindly share your site url so we can take a closer look.
    Also share a screen shot with indicate exactly what you want.

    Thanks
    A


  • Hi,

    I would like to have the menu in mobile mode also for tablets and viewport below 1000px

    I attached to screenshots below. Hope they helps. At the moment I'm asking the other staff members if I can share the login credentials. Since the site is not ready for public, is there a way to send you the URL in a private mode?

    So Screenshot_2.png should appear like Screenshot_1.png

    Regards,
    Fede
    Screenshot_2.png
    391K
    Screenshot_1.png
    223K
  • edited February 2017
    Hi 

    Kindly undo given above CSS code and add this given new one 

    @media (max-width:1000px) {
    .navbar-header {
      float: none;
    }
    .navbar-toggle {
      display: block;
    }
    .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar-nav {
      float: none!important;
    }
    .navbar-nav>li {
      float: none;
    }
    .navbar-collapse.collapse.in{
      display:block !important;
    }
    }

    If still its not work 
    you can share your site URL on my email id : [email protected]

    Thanks
    A
  • Hi,

    Thank you for your reply:
    I inserted the code you provided. When the site is loaded, it appears as in the screenshot below. If I click the toggle menu item, the menu doesn't disappear, but remain in position hovering the site contents.

    I'm sending you a email as soon as possible with the access details.

    Regards,

    Fede
    Screenshot_2.png
    642K
  • Hi,

    I sent you a email. 

    Please let me know if you received it.

    Thanks,

    Fede
  • Hi 

    Issue fixed.

    Can i close this ticket.

    Thanks
    A

Sign In or Register to comment.