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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 8, 2019 at 10:34 pm #111909

    wurlnet
    Participant

    Hi

    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

    wurlnet
    Participant

    1- 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 Noromit
    Member

    Hello,

    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

    wurlnet
    Participant

    Elise that’s done it, thanks!

    March 9, 2019 at 6:14 pm #111999

    wurlnet
    Participant

    Sorry 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 Noromit
    Member

    Hello,

    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

    wurlnet
    Participant

    Thanks 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 Noromit
    Member

    Hello,

    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

    wurlnet
    Participant

    Hi

    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 Noromit
    Member

    Hello,

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)