Style not responsive on tablet or minimized window

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Mrs.T
    Senior Member
    • Nov 2007
    • 1210
    • 6.0.X

    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:	101
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:	91
Size:	94.4 KB
ID:	4382409


  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73979

    #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 demonstration site.
    vBulletin 5 API

    Comment

    • Mrs.T
      Senior Member
      • Nov 2007
      • 1210
      • 6.0.X

      #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.

      Comment

      • Mrs.T
        Senior Member
        • Nov 2007
        • 1210
        • 6.0.X

        #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.

        Comment

        • glennrocksvb
          Former vBulletin Developer
          • Mar 2011
          • 4011
          • 5.7.X

          #5
          Try adding this custom CSS:

          Code:
          #breadcrumbs {
              clear: both;
          }

          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

          Comment

          • Mrs.T
            Senior Member
            • Nov 2007
            • 1210
            • 6.0.X

            #6
            Originally posted by Glenn Vergara
            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.

            Comment

            • Mrs.T
              Senior Member
              • Nov 2007
              • 1210
              • 6.0.X

              #7
              I've created a JIRA as more tabs and longer tab titles are useful. http://tracker.vbulletin.com/browse/VBV-17968

              Comment

              • Carrfixr
                Senior Member
                • May 2017
                • 1364
                • 5.5.x

                #8
                Would drop down menus help out as well?

                Comment

                • Mrs.T
                  Senior Member
                  • Nov 2007
                  • 1210
                  • 6.0.X

                  #9
                  Originally posted by Carrfixr
                  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.

                  Comment

                  • Carrfixr
                    Senior Member
                    • May 2017
                    • 1364
                    • 5.5.x

                    #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


                    • Mrs.T
                      Mrs.T commented
                      Editing a comment
                      Cheers for that Carrfixr, I will take a look.
                  • In Omnibus
                    Senior Member
                    • Apr 2010
                    • 2310

                    #11
                    Originally posted by Wayne Luke
                    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

                    • Mrs.T
                      Senior Member
                      • Nov 2007
                      • 1210
                      • 6.0.X

                      #12
                      Didn't realise Wayne had already created a JIRA, it is here: http://tracker.vbulletin.com/browse/VBV-17960

                      Comment

                      • Wayne Luke
                        vBulletin Technical Support Lead
                        • Aug 2000
                        • 73979

                        #13
                        Originally posted by In Omnibus
                        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 demonstration site.
                        vBulletin 5 API

                        Comment

                        widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                        Working...