Archived topic
Merged transparent header causing mobile menu to have no background color
1 reply · Started by Anwar on June 3, 2022
Hi,
At https://on2it.net/ we use a merged header which contains a transparent header with the main nav in it. Works like a charm, except when you view it on mobile and the BG of the main nav is transparent.
When you visit a page like where there is no merged header https://on2it.net/contact, the main nav om mobile looks fine, because it inherits the black bg.
Is there a way to make sure the mobile nav on merged headers appears black? If there is specific CSS needed, please let me know.
Hi Anwar,
When you are using merge function, the header and navigation color will be set to transparent by default.
You are some options here.
1. Use this CSS:
.header-wrap .main-nav ul {
background-color: #000;
}2. Set it to merge on desktop only.
3. Use off canvas menu on mobile.
Let me know if you need further assistance :)
