Announcement

Collapse
No announcement yet.

Display header tabbar to the right of logo instead of below it

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

  • Display header tabbar to the right of logo instead of below it

    Hi All,

    I'd like to display the header tabbar to the right of the logo instead of below it. Is this possible? I'm trying to mimic my main site design in the forum design to make the forum appear like more of a seamless part of the site. If you go to 1010music.com you will see the way I want it to look. Then go to forum.1010music.com to see how the vBulletin header looks in comparison.

    I'm not very experienced at customizing vBulletin or using CSS so I appreciate any help, even if the answer is that it can't be done.

    Thanks!

  • #2
    It's possible but it requires a bit more work than a line or two of code. The Navigation Bar is coded to a specific height which is probably different fro your logo height. The tabs themselves are aligned left relative to the viewport device width. A good bit of the CSS has to be edited. I'll have to see if there's a quick solution for this unless someone else has one already.

    Comment


    • #3
      It looks like you might be able to use an HTML phrase in the leftmost tab to insert your logo since it is only 45 pixels in height. It would probably need to be linked to a dead URL (#).

      Wayne Luke will have to indicate whether or not this is possible on Cloud.

      Comment


      • #4
        I've done this as an experiment. But that was before things where changed for Themes. It only required CSS but you'll have to play with things to get it right. There are two things you have to look at, the logo and the search box.

        Set the left margin to move the navbar to the right. Set the top-margin to a negative value to move it up. Change the width to fit. Something like this seems to work on a full size desktop monitor:

        Code:
        #channel-tabbar {
            margin-left: 550px;
            width: 70%;
            max-width: 703px;
            margin-top: -70px;
        }
        Click image for larger version  Name:	2020-03-24_10-52-06.png Views:	0 Size:	32.3 KB ID:	4437410





        However, this is very much a hack and will probably fall apart on different devices and screen sizes. Making the change can get very involved with media queries to try and solve all the different idiosyncrasies that will pop up.
        Last edited by Wayne Luke; Tue 24 Mar '20, 11:56am.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment


        • #5
          Thanks. Wayne's solution looks easy enough to implement. I will try it on a test style and see how bad the degradation is on mobile and smaller screen widths. Thanks!

          Comment

          Related Topics

          Collapse

          Working...
          X