Announcement

Collapse
No announcement yet.

Style not responsive on tablet or minimized window

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Style not responsive on tablet or minimized window

    I've created a little Christmas theme for our members to choose as an optional style. I've made it off the 'Stripes' theme and haven't changed much, just the background and a few colours and font sizes.

    However, it is not responsive except on very small screens. On a tablet, or if you minimize a window, the nav bar turns and the sub nav bar tabs disappear. As in screen shots below. Anyone know what I might have done wrong?

    This is what it should look like:

    Click image for larger version

Name:	normal view.png
Views:	1
Size:	106.0 KB
ID:	4382408

    This is on tablet or minimized window but once it gets to mobile size is does respond as expected:

    Click image for larger version

Name:	tablet view.png
Views:	2
Size:	94.4 KB
ID:	4382409


    __________________________________________
    We don't stop playing because we grow old;
    we grow old because we stop playing.
    GBS

  • #2
    Your tabs are wrapping because of the length of them. Shorter tab titles will probably help. If you hold the tablet in landscape mode, does it work better?

    This will probably need a JIRA and a switch to the responsive menu at a larger screen size if too many tabs exist. I don't know if we can calculate the overall length of the tabs in the code. At least not reliably after CSS is added into the mix.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      Thanks Wayne, the thing is, on our normal default style, with same tabs this doesn't happen. It still turns but pushes the lower navigation down. So assumed it was just this style, but I've tried to match font size between the two, in case it was that.

      Yes, turning landscape does fix it.
      __________________________________________
      We don't stop playing because we grow old;
      we grow old because we stop playing.
      GBS

      Comment


      • #4
        I tried shortening the tab titles but it didn't help.

        It's worse in the style 'stripes' which I used to make the Christmas theme, in that the sub tabs disappear altogether:

        Click image for larger version  Name:	tablet view.png Views:	2 Size:	94.4 KB ID:	4382488


        but in our default version, which was based off the vBulletin style, it still turns but the sub nav moves down, rather than disappearing.



        Click image for larger version  Name:	defaultview.png Views:	2 Size:	22.3 KB ID:	4382487

        So it is obviously the way the 'stripes' theme is made, I will just have to remake the Christmas theme and base it off our default style.

        I might create a JIRA to see if the problem of too many tabs/responsive could be fixed.
        __________________________________________
        We don't stop playing because we grow old;
        we grow old because we stop playing.
        GBS

        Comment


        • #5
          Try adding this custom CSS:

          Code:
          #breadcrumbs {
              clear: both;
          }

          AutoLinker-vB5+vBCloud | Topic Starter Ribbon | Blur Replies for Guests | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Events Module | Moderator List | Drag/Drop Upload

          Comment


          • #6
            Originally posted by Glenn Vergara View Post
            Try adding this custom CSS:

            Code:
            #breadcrumbs {
            clear: both;
            }
            Thanks so much Glenn, that worked. It moves the sub nav down rather than it disappearing.
            __________________________________________
            We don't stop playing because we grow old;
            we grow old because we stop playing.
            GBS

            Comment


            • #7
              I've created a JIRA as more tabs and longer tab titles are useful. http://tracker.vbulletin.com/browse/VBV-17968
              __________________________________________
              We don't stop playing because we grow old;
              we grow old because we stop playing.
              GBS

              Comment


              • #8
                Would drop down menus help out as well?

                Comment


                • #9
                  Originally posted by Carrfixr View Post
                  Would drop down menus help out as well?
                  Yes it would, I've seen them in use but assumed they need special coding and couldn't be done on Cloud sites. I can't see anything in the nav bar site builder for adding a drop down.
                  __________________________________________
                  We don't stop playing because we grow old;
                  we grow old because we stop playing.
                  GBS

                  Comment


                  • #10
                    Mrs Tiggywinkle

                    Contact Glenn about it on his site. He is the MOD man and without him i wouldn't still be on the cloud with its limitations. You can see the drop downs on my site, they make all the difference in the world. IMO it's a much more professional look and feel. I might also add he is very dependable for advice
                    Some of the better mods i like are

                    drop downs
                    topic starter
                    glowing online icons
                    glowing notifications and PM's
                    moving the search bar off the banner

                    Comment


                    • MrsTiggywinkle
                      MrsTiggywinkle commented
                      Editing a comment
                      Cheers for that Carrfixr, I will take a look.

                  • #11
                    Originally posted by Wayne Luke View Post
                    Your tabs are wrapping because of the length of them. Shorter tab titles will probably help. If you hold the tablet in landscape mode, does it work better?

                    This will probably need a JIRA and a switch to the responsive menu at a larger screen size if too many tabs exist. I don't know if we can calculate the overall length of the tabs in the code. At least not reliably after CSS is added into the mix.
                    Why not add an option for a second row of navigation bar tabs? It would seem a more logical solution than losing the inline display altogether on larger screens. Just a thought.

                    Comment


                    • #12
                      Didn't realise Wayne had already created a JIRA, it is here: http://tracker.vbulletin.com/browse/VBV-17960
                      __________________________________________
                      We don't stop playing because we grow old;
                      we grow old because we stop playing.
                      GBS

                      Comment


                      • #13
                        Originally posted by In Omnibus View Post
                        Why not add an option for a second row of navigation bar tabs? It would seem a more logical solution than losing the inline display altogether on larger screens. Just a thought.
                        Might be an option but it will be ugly.

                        Translations provided by Google.

                        Wayne Luke
                        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                        vBulletin 5 Documentation - Updated every Friday. Report issues here.
                        vBulletin 5 API - Full / Mobile
                        I am not currently available for vB Messenger Chats.

                        Comment

                        Working...
                        X