close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

'Active' tab php not working after converting tab menu to dropdown

Thread began 2/07/2017 3:22 pm by tmcbinc99963 | Last modified 2/28/2017 11:41 am by Ray Borduin | 887 views | 36 replies |

tmcbinc99963

'Active' tab php not working after converting tab menu to dropdown

Our website has a tab menu featuring categories (tabs) of products (menu). When the user clicks on a product in the menu, it goes to a detail page. This page has the same tab menu and shows the same category tab as active. Webassist created this functionality in premiere support.

The tab menu has now been converted into a dropdown but the tabs don't activate like the original tab menu. The menu drops down on click, and redirects to a detail page when a product is selected. The new dropdown has a 'list-item' class in the list tags which the original didn't have, but without it, the dropdowns don't work. Also, the dropdown-toggle has a 'dropdown' attribute rather than a 'tab' attribute, but don't know if this is problematic.

Don't know if all this is just a css fix, or if the php activeTab code webassist created needs to be tweaked for the dropdown.

Sign in to reply to this post

Ray BorduinWebAssist

Can I see a url where you have this implemented? That would help me to see what is going on.

Sign in to reply to this post

tmcbinc99963

The link is in the private message. The only issue is getting the active tab to display red rather than white.

Sign in to reply to this post

Ray BorduinWebAssist

It looks like we added code that added class="active" to the current tab in the old menu system. You could probably copy that logic for your new navigation and then define a new class like:

.navbar-nav > li.active > a:link {
background-color: #e32019;
color: #ffffff;
}



That could could be adjusted to be whatever styles you want on the active tab.

Sign in to reply to this post

tmcbinc99963

The active link works but nothing I've tried will change the active link background color.

Sign in to reply to this post

Ray BorduinWebAssist

Do you have it adding the "active" class to the <li> tag that should be active? Can I see a url where you have tried?

Sign in to reply to this post

tmcbinc99963

I tracked down the correct css for the tab, but had to change 'data-toggle' from 'dropdown' to 'tab' for it to work as active, which removes the dropdown functionality.

You can view with the url in PM (only first two tabs have been changed).

Sign in to reply to this post

Ray BorduinWebAssist

You shouldn't have to make that change from 'dropdown' to 'tab'. It appears that is not the correct approach and shouldn't be necessary. If you can get the new page to add a class, then you shouldn't have to remove or change any existing classes and should be able to style the resulting page with the added class reference.

Sign in to reply to this post

tmcbinc99963

I've tried every combination of css and :active I can think of, but nothing will change the active white tabs to red. I've eliminated all css styles except the dropdown, thinking there was a css style overriding. Tried revising the original tab menu, and adding back in the dropdown classes, etc., but the red goes away every time. I can make all tabs red, and the hover works, but not active. The only way I've gotten the tabs to work properly as 'active' is to remove the dropdown feature.

Sign in to reply to this post

Ray BorduinWebAssist

How can I reproduce what you have done? I don't see the active class being added when I navigate currently. What pages should I navigate and steps should I follow to reproduce the problem so I can suggest the proper CSS?

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...