[SOLVED] CB default theme menu tabs showing vertical instead of horizontal

Vorak
OFFLINE
Posts: 218
Thanks: 41
Karma: 3

7 years 9 months ago - 7 years 9 months ago #292496 by Vorak

[SOLVED] CB default theme menu tabs showing vertical instead of horizontal was created by Vorak

Hello,

As I recently upgraded to CB 2, I noticed that the menu items on the front-end (e.g. in edit profile as well as the profile page itself) are not showing up right. In most cases, the tabs are displayed vertically instead of horizontally next to each other.

I have discovered that it is the template that I use that is causing this conflict, as it is resolved as soon as I load the page with another template. So I am trying to find a way to override the particular CSS setting of the main Joomla template, but no luck.

I am not well versed at CSS, but I have discovered through the Chrome browser functions that this CSS-code of the main Joomla template is probably the cause:

Code:

#main_content ul li, #main_content2 ul li {
    width: 94%;
}

When using the inspections-function of Chrome, when I switch off the width: 94% then the menu shows up horizontally again.

Unfortunately, I can't figure out how to override that in the CB default template. Even when I try to change the width in the main Joomla template, there doesn't seem to be any effect on the website at all, nor on the menu tabs.

See attachment:

This shows how all the tabs are vertically below each other, and at the bottom also shows where I found the 94% CSS code that seems to be the cause.

Can anyone tell me what code I should add in the overrides of the Default CB template?

Thanks.

Attachments:

Last edit: 7 years 9 months ago by krileon. Reason: Added [SOLVED] tag to subject

Please Log in or Create an account to join the conversation.

Vorak
OFFLINE
Posts: 218
Thanks: 41
Karma: 3

7 years 9 months ago #292497 by Vorak

Replied by Vorak on topic CB default theme menu tabs showing vertical instead of horizontal

Update:

After fiddling around some more, I seem to have figured it out. I had not tried using !important which was why I didn't get any results out of any override I tried.

This is the code I managed to make it work with:

Code:

.cbTabNav {
 width: auto !important;
}

Perhaps others who may eventually run into such an issue will be helped by this.

The following user(s) said Thank You: mikerotec

Please Log in or Create an account to join the conversation.

Vorak
OFFLINE
Posts: 218
Thanks: 41
Karma: 3

7 years 9 months ago #292498 by Vorak

Replied by Vorak on topic CB default theme menu tabs showing vertical instead of horizontal

Just for the record, I have also fixed other CSS conflicts with these overrides:

Code:

.cb_template ul.dropdown-menu > li,
.cb_template ul.nav > li {
 width: auto !important;
}

.cb_template button {
 height: auto !important;
}

The first one is for other CB menu's on the frontend, the second one for (green) buttons.

The following user(s) said Thank You: krileon, mikerotec

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48709
Thanks: 8319
Karma: 1447

7 years 9 months ago - 7 years 9 months ago #292504 by krileon

Replied by krileon on topic CB default theme menu tabs showing vertical instead of horizontal

CB can't account for 3rd party CSS conflicts. CB is only tested on default Joomla templates. Also note Joomla 2.5 is EOL (Joomla does not support it anymore) and while CB will work on Joomla 2.5 it is no longer tested on Joomla 2.5. I can not recommend enough that everyone keep their installs up to date.

If you happen to run into CSS conflicts I recommend correcting them using the built in CSS override functionality in CB. See below on how to use it.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Last edit: 7 years 9 months ago by krileon.

Please Log in or Create an account to join the conversation.

Vorak
OFFLINE
Posts: 218
Thanks: 41
Karma: 3

7 years 9 months ago #292519 by Vorak

Replied by Vorak on topic CB default theme menu tabs showing vertical instead of horizontal

Yes, I did use the built-in override for the default template indeed, which is a neat new feature in CB 2!

The following user(s) said Thank You: krileon

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon