BuddyPress menu and responsive theme

• vunguyen

  said

  Hi Guys,

  Please look at the picture here:
  
  As you can see, when you have a few menu items, buddypress menu will get spilled over on a small screen pc.
  The result from that effect is: all the items on the second line don’t get the same format as the menu items on the first line.

  Some help to fix this please

  Thanks guys!

• jeffw

  said

  Hi, vsync.

  I don’t think there is a lot we can do about that. This is happening because there is not enough width for all those tabs to fit onto one line. You could try tweaking the margins and padding for the tabs. Razor does not create these tabs, BuddyPress creates these tabs, Razor just styles them. I don”t think the BuddyPress code takes into account that because of added plugins there might be too many tabs to fit on a line. I’ll run the issue past @andy to see if he has any thoughts.

• vunguyen

  said

  Hi jeffw,

  Thanks man. I will wait.
  And just to clarify myself, what I mean by fix: I need second row (or third row for that matter) to have the same style as the first row.
  I don’t want to change its behaviour.

• rkarel

  said

  I have an idea to change words to icons But it is very hard for me…

• jeffw

  said

  I had a chat with Andy about this and he agrees with me that nothing that can be done about it. This is a case where it comes down to site specific settings and you can either make the content area wider or customise the CSS to make the tabs smaller.

  Here are some things you can try in your Custom CSS box to try to squeeze more into the available width:

  / * adjust left/right padding on buddypress tab text */
  .item-list-tabs a, .item-list-tabs li > span { padding: 8px 5px 12px 5px !important }
   
  / * adjust font size for buddypress tab text */
  .item-list-tabs a, .item-list-tabs li > span { font-size: 10px !important }
   
  / * adjust font weight for buddypress tab text */
  .item-list-tabs a, .item-list-tabs li > span { font-weight: normal !important }
   
  / * adjust letter spacing for buddypress tab text */
  .item-list-tabs a, .item-list-tabs li > span { letter-spacing: -1px !important }

  I’ve split these up for clarity, you could use any one of these ideas or combine any two or more to try to make more space.

• vunguyen

  said

  Hi jeffw,

  Thanks for the suggestions.
  I’m using a modify skin with full browser width so I’m at the maximum wide. The reason I ask for it because some members use laptops without decent screens.

  For anyone interested, I modified jeffw’s suggestion a little bit to suit my need.

  @media all and (min-width: 960px) and (max-width: 1160px) {
  #item-nav .item-list-tabs a { padding: 8px 6px 22px 6px !important }
  }
  

  Note:
  - If you use it, you will need to modify the numbers to fit your style.
  - I have only 2 extra plugins, so this works for me.
  - padding bottom must be 20px or more (otherwise you will cut off the arrow showing currently selected tabs)

  Thanks again @jeffw and @andy!

• billyboy

  said

  I have a similar non theme problem I asked about in the Wordpress forum. While I’ve used the first code below at a bunch of different widths, somebody in that forum suggested I change to a absolute pixel width to cure the problem related to my ASUS tablet which cut things off at the right, but only on pages that had a wide image, that yes, was within the limites of 990 pixels which is the default for the Razor theme if I’m not mistaken.

  Now using the 2nd option below doesn’t cut things off anymore, but the pages look confined due to too little width on most desktop monitors for my tastes.

  The curious thing is all the higher resolution desktop monitors I’ve checked my site out on AND the ASUS table are running at the same resolution (1920×1200) and the tablet before changing to a absolute pixel width showed the site correctly with nothing cut off if you rotated the tablet so it was in portrait mode, which to me makes no senses since that’s the more narrow width, with the problem only showing up in landscape mode. Oh well, for what it’s worth.

  .pageWrapper, .top_menu_bar { width: 64%  !important; }
   
  .pageWrapper, .top_menu_bar { width: 1130px !important; }
   
  

• vunguyen

  said

  Hi Billyboy,

  I think you are posting on the wrong topic. The issue in this topic is not at all related to yours.
  However, I’m using a responsive 100% width skin without any problem. You can’t just set the page width and expect it to work. You need to modify the skin to compensate for the size of the page.
  Also, please bear in mind that not everyone have access to good monitor. You will need to have a look at your site on different monitor size and then modify the skin so it will look good. That’s what in this topic.

  Hope this help!
  Cheers!