0
Welcome Guest! Login
0 items Join Now

SOLVED Gantry 5 - Hydrogen - menu background transparency problem

Last Post
Search Topic

  • SOLVED Gantry 5 - Hydrogen - menu background transparency problem

    Posted 9 years 4 weeks ago
    • Hi, I'm building website on Hydrogen theme and Gantry 5. But I have serious issues with transparancy in menu.
      You can check site here: 70344.w44.wedos.ws/

      For menu I'm using Headroom script and I wanted menu with transparent background color (RGBA setting). So I set everything in Base Outline and when you scroll down the page, menu has semitransparent backgorund. But when the menu sitting under the Header, menu itself is semitransparent, but under the menu there is something with white background. So I started tweaking the code and I can see, there is #g-page-surround div and menu is under this div. So I changed background color in my custom.scss for g-page-surround and it was working, but only if color is set in hex code. When I use RGBA code, background is white again. In main scss files for hydrogen g-page-surround should have base background color, but for some reason, when I using RGBA color code, background is white again.

      I spent several hours to solve the problem, but without any progress. Could anyone help please?
    #1287344
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Gantry 5 - Hydrogen - menu background transparency problem

    Posted 9 years 3 weeks ago
    • So if I understand correctly when you page first loads the nav-bar doesn't appear semi-opaque?
      I see you have a partial transparency on the nav-bar background but even if you made it totally transparent you would still see the white background of the <body> itself:
      body {
    background: rgba(255, 255, 255, 0.31);
}

      With nothing behind the body background: rgba(255, 255, 255, 0.31) basically looks the same as background: white

      Or I'm not understanding you issue at all?
    #1287422

  • Re: SOLVED Gantry 5 - Hydrogen - menu background transparency problem

    Posted 9 years 3 weeks ago
    • The problem is, that rgba syntax not working for body, neither for #g-page-surround.

      I added this code to my custom.scss and background is still white:
      body {
    background: rgba(0, 0, 255, 0.3) !important;
}

#g-page-surround {
    background: rgba(255, 0, 0, 0.3) !important;
}

      When I use this, background color under the menu is blue, so it's working:

      body {
    background: rgb(0, 0, 255) !important;
}

      When I use this, background color under the menu is red, so it's working too:
      #g-page-surround {
    background: rgb(255, 0, 0) !important;
}

      So it looks like tags body and #g-page-surround cant use RGB syntax with added alpha. And thats the core of my problem... :-(
    #1287454
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Gantry 5 - Hydrogen - menu background transparency problem

    Posted 9 years 3 weeks ago
    • Martin Klecka wrote:
      The problem is, that rgba syntax not working for body, neither for #g-page-surround.

      I added this code to my custom.scss and background is still white:
      body {
    background: rgba(0, 0, 255, 0.3) !important;
}

#g-page-surround {
    background: rgba(255, 0, 0, 0.3) !important;
}

      When I use this, background color under the menu is blue, so it's working:

      body {
    background: rgb(0, 0, 255) !important;
}

      When I use this, background color under the menu is red, so it's working too:
      #g-page-surround {
    background: rgb(255, 0, 0) !important;
}

      So it looks like tags body and #g-page-surround cant use RGB syntax with added alpha. And thats the core of my problem... :-(

      No CSS doesn't respect module position's it works everywhere. So when I try these code lines:
      body {background: rgb(0, 0, 255) !important;}

      AND

      #g-page-surround {background: rgb(255, 0, 0) !important;}

      They appear to do nothing. On one monitor I have your site and on my other monitor I have ths CSS panel. If I disable and reenables your code I don't see any changes on the page at all.
    #1288343

Time to create page: 0.065 seconds