Collapse menu for iPad landscape

Home Forums Older releases 0.9.x Collapse menu for iPad landscape

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1325
    bertflisak
    Participant

    I need to have my menu collapse when it is in landscape. Know I need to change some media queries, but I can’t figure out how to do it. I tried this, but it didn’t work.
    Is there something that I am missing?

    @media screen and (max-width: 1000px) {

    /* The following will make the sub menus collapsible for small screen devices (it’s not recommended editing these) */
    ul.navbar-inverse{width:auto !important;}
    ul.navbar-inverse ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
    ul.navbar-inversee>li{float:none;}
    ul.navbar-inverse>li>a,ul.navbar-inverse ul.sm-nowrap>li>a{white-space:normal;}
    ul.navbar-inverse iframe{display:none;}

    /* more rules to style the collapsible menu bar … */

    }

    Here is a testing page: http://cdfps.com/Valara/site_pages/nav_test.html

    Any help would be great.

    #1589
    admin
    Keymaster

    Hi, as far as I can see, you are using SmartMenus with Bootstrap. In this case, the menu relies on the responsive breakpoints defined in the Bootstrap CSS:

    http://cdfps.com/Valara/css/bootstrap.css

    and in your case the breakpoint at which the menu becomes collapsible is 768px (which is the default). In order to fix this, you could:

    1) either try to edit your Bootstrap’s generated CSS file and find the rules that matter for the menu like the following (these are just some sample ones, you will need to find and tweak them all…):

    @media (min-width: 768px) {
      .navbar-toggle {
        display: none;
      }
    }
    
    ...
    
    @media (max-width: 767px) {
      .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
      }
    
      ...
    
    /* etc... */

    2) or create and download a customized version of the Bootstrap CSS with the exact breakpoints you like:

    http://getbootstrap.com/customize/

    This is the breakpoints section you need to tweak:

    http://getbootstrap.com/customize/#media-queries-breakpoints

    Though if you do this, the new breakpoint width will also affect all other Bootstrap components.

    BTW, I noticed you are linking both the normal and minified version of the Bootstrap CSS on your page:

    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    which you don’t need and I guess you would like to fix.

    Please let me know if I could be of any further help.

    #1623
    Shawnd
    Participant

    Hi there,

    i need it on the other way.

    I will use the collapse menu in small devices like at the xtra small bootstrap menu.
    But the problem is, i have different layouts for the small and the xtra small bootstrap grid system, therefore it is not a solution for me to change the device pixel when it will change to small.

    I will just to use the navbar collapse which is at the xtra small version, at this time it gets automaticly hidden when i get over the xtra small width 768px.
    I made it via own less file visible but it is just shown and the collapse functions to collapse in and collapse out are not given.

    Thanks for help and i hope u understand my problem

    #1626
    admin
    Keymaster

    Hi, could you please post some sample URL I can test because it’s a bit difficult to imagine what exactly you have done and are trying to achieve?

    You would like to have a collapsible menu for all widths, correct?

    I will take a look at your code.

    Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?