Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tabs > Can the site menu bar be made to wrap?
Shannar (Applicant) 11/20/2010 5:08 AM EST : Can the site menu bar be made to wrap?
Shannar
Posts: 229

0
Like

0
Dislike

Mottie,

Amazing - where do you find the time to do all this great stuff, I'm new to guild portal having just taken on revamping the guild web site ready for cata and already i dont know what I would have done without you - Thanks

I'm currently useing the default site wide navigation bar: nav bar, but as I quickly start to add pages and content its getting too wide, my aim is to make the (social guild) site a one stop for guild and wow related info, and be as few clicks as possible to get to relevent content, so I'd like to have the site wide nav bar wrap when it exceeds the current browser page width rather than go the route of sub menus if I can avoid it , but I can't see any way to do this.

Am I missing something or does this need a custom nav bar?

www.no-pressure.co.uk

Many thanks

Shan

PS Filler space around widgets etc is dark gray despite me setting everything I can find to black for backgrounds, is there a site wide setting for this I'm missing?
TopBottom

Mottie (SuperAdmin) 11/20/2010 10:00 AM EST : RE: Can the site menu bar be made to wrap?
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Shannar!

I started messing around with moving the tabs to a second row and frankly I think it's kind of fugly - it needed a bit more tweaking but I didn't bother.



So I think these are your options:
  1. If you want the code to do the above to the nav bar, then I will provide it.
  2. Reduce the size of the tab bar, using this css (add it to Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard):

    .straightBarNormalTab, .straightBarFirstTab, .straightBarMouseOverTab {
     font-size: 80%;
     width: 50px !important;
     min-width: 50px !important;
     padding: 3px 1px !important;
    }

  3. You could combine some tabs so there are less.
  4. I've helped someone add this side menu to their site... but I can't seem to find that post right now.
  5. Or replace the tab bar with a menu that has sub menus, like SuperFish - I will have to work on how to add this if you want this option.
As for your page background color, you can change it by going to Control Panel > Style Tools > General Style Settings > Background tab > Background Color. Then choose "No Color" in the upper right or black in the bottom left.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Shannar (Applicant) 11/21/2010 4:24 AM EST : RE: Can the site menu bar be made to wrap?
Shannar
Posts: 229

0
Like

0
Dislike

Mottie,

Thank you for the quick responce

The background colour confirmed i was already looking in the right place, so it made me go off and look elsewhere and I found the problem - thanks!

The menu, your right its not great but I've inherited this and as well as giviing it a much needed make over - you should have seen before  - I want to make sure the next person has a fighting chance of understanding it.

So having the default menu simply wrap if it exceeds the current page width would be the best solution i think (I'm inclined to think it would be a good addition to the standard menu - aesthetics aside), the Superfish Nav-bar Style menu would by far be a much more elegent solution, but I fear my successor may struggle to understand it (not that I'm any expert!), and of course it wont be as quick and easy to maintain.

Please could you let me have that code to make it warp - if thats possible, I already applied your code to reduce the size which is a big help.

Many many thanks

Shan
TopBottom

Mottie (SuperAdmin) 11/22/2010 11:42 AM EST : Two Row Nav Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Shannar!

Ok I put together a script to make the tab bar into two rows (max!).

Two Row Nav Bar

GuildPortal admin site link to the original post

This script only works on the "Nav Bar" type navigation and it will only make the tab bar into two rows. I don't really think this is the best solution because of the design of it, but I wrote it as requested.

Before


After

CSS
Add this CSS to your custom CSS (Control Panel > Custom HTML & Scripts > Custom CSS > CSS Additions to Standard),
/*CSS for two row tab bar */
/* Two Row CSS - required */

.straightBarWrapper, .straightBarMouseOverTab,
.straightBarActiveTab, .straightBarNormalTab { background-repeat: repeat; }

/* CSS to stretch the tabs - optional */
.straightBarWrapperInnerTable { margin: 0 auto; width: 100%; }
/* min-width set to 100%/# of tabs in the top row (100%/8 = 12.5%) - optional */
.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab { min-width: 12.5%; }
Script
Add this script to your custom scripting (Control Panel > Custom HTML & Script > Custom Javascript/JQueru > Document Ready Event tab)
/*** This script will make your Nav Bar into two rows ***/
// This script will only make two rows

 var maxTabs = 8; // in top row
 
 // Don't change anything below
 var navbar = $('table.straightBarWrapperInnerTable');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
  // set to 80px (twice the background image height)
  navbar.parent().andSelf().height(80);
 }
Customizing
  • CSS
    • Only the first part of the CSS is required to add the nav bar background image to both rows.
    • The rest of the css is optional. The second line of CSS makes the nav bar stretch all the way across the page.
    • The last line of CSS makes each tab equal in size. Notice the comment with the math (ewwww)... so if you have 8 tabs in the top row, take 100% divided by 8 which equals 12.5% (in red).
  • Script
    • There is only one setting for the script... maxTabs, the maximum number of tabs in the top row (in red).
    • Because the Nav bar is a table, the second row tabs have to line up with the tabs above, so the second row will be aligned to the left and the tabs will be the same size as the ones above.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/21/2011 8:52 AM EST : RE: Two Row Nav Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

For Standard Tabs, just add this code (not the code above) to the custom script tab (Control Panel > Custom HTML & Script > Custom Javascript/JQueru > Document Ready Event tab) - it ended up being less code than the Nav Bar code because of less styling.
/*** This script will make your Standard Bar into two rows ***/
// This script will only make two rows

 var maxTabs = 5; // in top row
 
 // Don't change anything below
 var navbar = $('table.TabBar');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
 }
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Extermicide (Applicant) 10/24/2011 3:33 PM EST : RE: Two Row Nav Bar
Extermicide
Posts: 350

0
Like

0
Dislike


 The 2nd script works for my purposes, but the buttons after wrapped are sitting one on top of the other.
 
 Is it possible to create a break/space between the upper and bottom row?
TopBottom

Mottie (SuperAdmin) 10/24/2011 4:27 PM EST : RE: Two Row Nav Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Try adding this to your css
.TabBar td { padding-top: 10px; }
Adjust the number in red to change the spacing.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Extermicide (Applicant) 10/24/2011 4:42 PM EST : RE: Two Row Nav Bar
Extermicide
Posts: 350

0
Like

0
Dislike



Not exactly sure "where" in my CSS to place this...
TopBottom

Mottie (SuperAdmin) 10/25/2011 8:50 AM EST : RE: Two Row Nav Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Extermicide!

Oops, sorry I forgot to include that information. Go to:
Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard
Make sure you check the "Enabled?" check box at the bottom before saving.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%