Mobile Menu Black to Transparent

  • Resolved Bob

    (@compumec)


    8 years, 10 months ago

    Hello,

    Can you tell me how I can stop the main menu back ground color from going to black at certain screen sizes?

    I am trying to get the menu to maintain a level of transparency regardless of @media.

    Thank you,
    Bob-

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi,

    You can use the css code below to keep the main menu background transparent:

    .site-header.float-header {
    background: transparent;
}

    Thread Starter Bob

    (@compumec)

    Hello,

    Thank you for your reply.

    I tried that and I am still getting the black menu.

    The effect shown in the drop down menu in this image, is what I am trying to achieve in the black part of the main menu.

    https://02ba63c.netsolhost.com/cabinetry/wp-content/uploads/2016/05/mobile-menu.png”

    Here is the CSS I am using.

    /* =Menu
    ——————————————————- */

    #masterhead .site-header {
    background-color: #1C1C1C !important;
    }

    .site-header.float-header {
    background-color: rgba(0, 0, 0, 0.51) !important;
    }

    #mainnav-mobi {
    background-color: rgba(0, 0, 0, 0.51) !important;
    }

    /* END OF Change */

    Hmmm can you post the URL of your site? and let me check it direcly

    Thread Starter Bob

    (@compumec)

    Sure,
    Here is a link to the site.
    https://02ba63c.netsolhost.com/cabinetry

    Thank you,

    I noticed that your issue is on mobile devices. Please try the code below:

    @media only screen and (max-width: 1024px){
  .site-header {
    background-color: rgba(0,0,0,0.6);
  }
}

    Thread Starter Bob

    (@compumec)

    That does the trick.
    Thank you for your help!
    Bob-

    hi, i also need help here please, not sure what i am doing, my home page is transparent but when i click on any other page the menu area goes black, plz help

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Mobile Menu Black to Transparent’ is closed to new replies.