Home › Forums › WoodMart support forum › 1 – Header builder displaying "Main menu" as "Menu" 2- Tab widget editing
1 – Header builder displaying "Main menu" as "Menu" 2- Tab widget editing
- This topic has 9 replies, 2 voices, and was last updated 5 years, 6 months ago by Elise Noromit.
-
AuthorPosts
-
March 8, 2019 at 10:34 pm #111909
wurlnetParticipantHi
I’ve been experiencing issues with editing css, a WordPress forum suggested that I should switch from the child theme to the main theme and back again, unfortunately as soon as i did this my main menu started displaying as my secondary menu and It wont revert back.
My issues are as follows-
1- The header builder is displaying the “Menu” option instead of the “main menu”, even though the “main menu” is selected in my default header.
2- On my Home page, I have a tab section which I’m trying to style. I’m trying to style the background colours of the tab labels in their normal state and active state, however they will not change from white.
Any help with these issues would be appreciated.
Many thanks
March 9, 2019 at 9:06 am #111938
wurlnetParticipant1- Has been resolved, the “display as main menu” box on the bottom of the menu page had unchecked
2- Please can you still help with this, I can edit Tab label colours on a test site with a default theme, but not when I revert back to this site with the Woodmart theme
March 9, 2019 at 3:43 pm #111980
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
/*default*/ body .vc_tta.vc_general .vc_tta-tabs-container .vc_tta-tabs-list .vc_tta-tab a{ background:red; } /*active*/ body .vc_tta.vc_general .vc_tta-tabs-container .vc_tta-tabs-list .vc_active a{ background:green!important; } /*hover*/ body .vc_tta.vc_general .vc_tta-tabs-container .vc_tta-tabs-list .vc_tta-tab a:hover{ background:yellow!important; }
Replace colors as per your needs
Best Regards
March 9, 2019 at 5:41 pm #111994
wurlnetParticipantElise that’s done it, thanks!
March 9, 2019 at 6:14 pm #111999
wurlnetParticipantSorry Elise, I’ve just noticed that this has worked on Desktop / tablet but not on mobile. I’ve pasted the same code into the themes mobile CSS section however it changes nothing.
Any help would be appreciated.
March 10, 2019 at 9:14 am #112066
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a { color: #666; background: red; } .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a:hover { color: #666; background: green; } .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a:focus { color: #666; background: yellow; }
Best Regards
March 10, 2019 at 9:14 pm #112172
wurlnetParticipantThanks Elise, that pretty much works, but this code doesn’t seem to consider the active state of a selected tab in mobile view. Your initial code included a consideration for an active state (“vc_active a{“) and works for desktop view, I was able to style this with no issues. I’ve tried adding the “vc_active” class to the string that you’ve used but it doesn’t apply any changes. I’ve also tried adding “a:active” to then end of your string but this only applies changes on click / select and does not apply change to a fully active state.
Any help would be appreciated!
March 11, 2019 at 10:50 am #112257
Elise NoromitMemberHello,
The provided code considers the active state of the tab and it works https://gyazo.com/12cf5b25b449def7cee360bdcf35b2e1
This part of code:
.wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a:focus { color: #666; background: yellow; }
You do not туув to add anything.
Best Regards
March 11, 2019 at 8:37 pm #112376
wurlnetParticipantHi
The code works perfectly on desktop view and if I reduce my browser size to trigger the media queries it still works.
However, if I view the site on mobile IOS safari and/or the mobile IOS google app it does not show the yellow border above the active tab and the active tab becomes inactive as soon as you touch anywhere else on the digitizer / screen.
Any ideas?
Thanks!
March 12, 2019 at 8:29 am #112442
Elise NoromitMemberHello,
Please replace the recent code with this one:
.wpb-js-composer .vc_tta-panel.vc_active .vc_tta-panel-title > a { background-color: #213F99 !important; border-top: 5px solid #FFDD17 !important; }
Best Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register