[Support request] Merge not working in mobile view

[CJ]

Hi,

Have an element with this Site Header:

Merge with Content: Merge
Header Background: rgba(255,109,112,0.83)

In Desktop view is the menu displayed correctly with the background color.
In Mobile view is the background color missing.

I have tried to apply Navigation Background color as well and then it works in Mobil view, but in the Desktop view does the color gets applied twice as both the Header background and the Navigation Background get applied and the menu looks darker then it should.

.site-header {
background-color: rgba(255,109,112,0.83);
color: #ffffff;
}

.header-wrap #site-navigation:not(.toggled), .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) {
background: rgba(255,109,112,0.83);
}

How to make a header that has one and the same color in both Desktop and Mobile views?

Thank you!

/CJ

[David]

Hi there,

did you resolve this ? As i can see the same background color on both desktop and mobile. let me know.

[CJ]

Hi David,

Thank you for looking into this.

I made a screenshot of the homepage to illustrate the color difference I have there.
https://ibb.co/5W5zbvG

/CJ

[David]

Edit the Header Element – go to the Site Header tab – check the Navigation colors option where you can then set the primary nav background to transparent or whatever color you need.

[CJ]

Hi David,

I have used and tried the settings you mention.

If I disable the Navigation Background then the Desktop menu looks fine. But the Mobil menu don’t have any background color.

If a enable the Navigation Background then the Desktop menu have the “double” color on the menu as I have described above. But the Mobil menu looks fine.

These are the settings I have and the Desktop has the “double” color as mention.
https://ibb.co/TqHCPSM

I have not looked into all the details, but a quick troubleshooting gave this:

These two divs are active in Desktop mode and as both have color then there will a “double” color for the menu and it will look darker.

.site-header {
background-color: rgba(255,109,112,0.83);
color: #ffffff;
}

.header-wrap #site-navigation:not(.toggled), .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) {
background: rgba(255,109,112,0.83);
}

This div is used only used during Mobil, same as in above. And is controlled by the Navigation Background color.
.header-wrap #site-navigation:not(.toggled), .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) {
background: rgba(255,109,112,0.83);
}

Either I have not found the right setting or the divs you use are not in harmony with each other.

/CJ

[David]

Try this CSS to remove the Nav background for desktop only:

@media (min-width: 769px) {
    .header-wrap #site-navigation:not(.toggled) {
         background-color: transparent !important;
    }
}

[Author]

Posts