Hi,
I am struggling with a weird issue with Menu Overlay problem. I have a site (https://dazeinfo.com) For my home page I have set Menu Overlay option and the Menu is placed perfectly fine with the transparent background. I have selected Header Type 6. I need to have a red colour header background for rest of my site. But the moment I go to Theme-Colours options and set Header/Main Menu background as Red, header background starts appearing on the home page as well. I have tried all possible options in theme but nothing worked.
Pls help.
Hi,
Unfortunately our theme do not have this option, the color for menu will apply on entire
website, in order to have a different color on menu, on home page you need to use some custom css
Create custom code with the browser’s Inspector or the Live CSS Box -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
here is one example -> https://www.screencast.com/t/FAazbkYOsfo4
.home .td-theme-wrap .sf-menu .td-normal-menu .sub-menu, .home .td-theme-wrap .sf-menu .td-normal-menu .sub-menu,
.home .td-theme-wrap .sf-menu li a:hover {
background-color: blue;
}
Thank you for your understanding.
Hi Calin,
Your response leads me to think about the functionality of “Pages with Overlay Menu” Newspaper theme is offering. So, if I go by the existing functionality of the theme, if I choose to create a custom page with TagDiv composer with an option of Overlay Menu, my rest of the whole site will only have a default Menu background based on the Header type selected?
In addition to my previous comment, probably my issue is misunderstood. Let me give you an example. If you visit the home page (https://dazeinfo.com) you can clearly see that its a page created using TagDiv composer with Menu Overlay option selected.
Now if you visit any post (https://dazeinfo.com/2018/12/26/google-pixel-revenue-market-share-2021/) you will see that whole header is showing black background – which I don’t want. Instead, I want to display Red Background here.
if I go to Theme Panel -> Theme Colours and set Header Background as Read, then the Overlay Menu functionality doesn’t work as the Red header background would start appearing on the home page (https://dazeinfo.com) as well.
Hope I am able to explain.
Hi,
Maybe I do not understand well your question first time.
If you refer to Page templates -> https://forum.tagdiv.com/page-templates-2/ -> Pages with Overlay Menu but the main menu and color for menu are the same for entire website for the moment.
If I do not understand correct please provide some more details.
Thank you for your understanding.
Hi Calin,
It’s simple. I have selected Header Style 6. This gives me default header background as black. To change it I go Theme Panel, Select Theme Colors options, go to Main Menu and select menu Background colour as Red. By doing this, the whole website header will change from black to Red.
Now I go to the home page in tagDiv editor and select an option Menu Overlay, which should ideally give me the home page without Header background – which is not happening.
If I dont select any colour from Main Menu option under Theme colour, then only Menu Overlay works but then the whole website header colour becomes black.
What I want eventually :
I need my home page with Menu Overlay effect without any header background, and rest of the website should have Red coloured header background.
Hope this will help.
Hi,
That seems to be the case, I will add this issue on our list and it will be fixed as soon as possible. The overlay should page template have priority over the background color of the menu.
In the meantime as quick fix, please enter this code in the Custom CSS section of the theme panel
.page-template-page-pagebuilder-overlay .td-header-menu-wrap-full {
background-color: transparent!important;
}
The menu background color set in the theme panel should not affect the pages that use the menu overlay template after this code is used. Sorry for the inconvenience and misunderstanding.
Thanks
