[Support request] Merge not working in mobile view

Home Forums Support Merge not working in mobile view

This topic contains 5 replies, has 2 voices, and was last updated by  David 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1209208

    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

    #1209357

    David Customer Support

    Hi there,

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

    #1209401

    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

    #1209427

    David Customer Support

    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.

    #1209537

    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

    #1209761

    David Customer Support

    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;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.