Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 18, 2017 at 12:53 pm #762869
    harryriegel

    Hello,

    maybe you have a solution….

    Just for the start: Menu und Logo Position: Logo left, Menu below – Header visibility and transparency: Transpareny with border.

    My aim ist to apply a background-image on the horizontal line with the logo, while the menu beneath should stay transparent. I took those steps:

    I.
    I managed to get #header_main with a specific background by applying:

    #header_main {
    background: url("//SECRET/wp-content/uploads/2017/03/header-bg.png"), none repeat scroll 0 0;
}

    II.
    Now I want the #header_main_alternate (located left underneath the logo) to get transparent:

    #header_main_alternate  {
     background: transparent none repeat scroll 0 0 !important;
}

    z-index and !important don´t work…. any idea?

    Regards,
    Harry

    March 18, 2017 at 1:51 pm #762879
    harryriegel

    I found a workaround and it looks as expected, but it does not work with sticky-menu option and leaves a white background when using Header visibility and transparency option: no transparency etc. 

    #header_main {
    background: url("//riegelmedia.de/wp-content/uploads/2017/03/header-bg-2.png"), none repeat scroll 0 0;
background-repeat: repeat-x;
}

    As you can see, I simply made a semitransparent .png, which does not have the full hight of header_mai,n but only 90px and this I made repeat-x.

    Any better suggestion for clean, valid code to achieve the result and keeping the options all working?

    • This reply was modified 7 years, 9 months ago by harryriegel.
    March 18, 2017 at 4:01 pm #762906
    Mike

    Hi,
    I’m not sure if I understand, you want a logo left, menu below with a colored (red) background for the logo, and transparent menu.
    You also want a sticky header with the red background for the logo, but what color will the menu be?
    Can you please include a admin login in the private content area so we can take a closer look.
    Best regards,
    Mike

    March 18, 2017 at 4:23 pm #762912
    harryriegel

    Hi Mike!

    Thank you for your time. You understood everything correct.

    1. In non-sticky and sticky menu, the logo-area should be #d22328 and menu-area should be 0,0,0,1.

    – This I somehow managed via “General Styling” settings by uploadimg a BG image for the Logo Area, where the BG image is smaller than the #header_main. So defined Background-color for the Logo Area shows up

    2. The transparency of the menu area is only necessary on certain pages, where I use a slider in conjunction with a transparent header function like for example on .home. But as you will notice this does not work properly with sticky menu and rezising of window.

    Regards,
    Harry

    • This reply was modified 7 years, 9 months ago by harryriegel.
    March 18, 2017 at 5:43 pm #762933
    Mike

    Hi,
    I’m sorry, I logged in and set the sticky header, and it seems to be working right for all sizes. Can you take a screenshot of the issue?
    postimage

    Best regards,
    Mike

    March 18, 2017 at 6:07 pm #762939
    harryriegel

    With the proceedure I described in the last pos,t I got some things sorted out .As a non-coder I am just unsure if this is the right approach… any hint to make those things more intelligent is welcome.

    But one problem remains: If you apply sticky header and shrinking header it does not work properly: The menu with black background vanishes/blends into the #header-main

    Regards,
    Harry

    March 18, 2017 at 10:33 pm #763004
    Mike

    Hi,
    It looks like we are both trying to change it at the same time, so it’s kind of hard to see if this works :) Try this code in the General Styling > Quick CSS field:

    .header-scrolled .home #header_main_alternate {
    background-color: rgba(0, 0, 0, 1);
}

    Best regards,
    Mike

    March 18, 2017 at 10:41 pm #763005
    harryriegel

    Hi Mike!

    First of all I really want to thank you for all the support!

    I tried the code (it´s still included in General Styling > Quick CSS field), but nothing chanced. I am off now. Therefore you won´t experience any interference ;-)

    Best regards
    Harry

    March 22, 2017 at 3:31 pm #764824
    Andy

    Hi,

    quite confusing here as you ask different questions. Please keep it clear and simple, with only one issue/question in one ticket.

    Try Mike’s code with an !important:

    .header-scrolled .home #header_main_alternate {
    background-color: rgba(0, 0, 0, 1) !important;
}

    Afterwards clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    April 5, 2017 at 2:11 pm #772541
    harryriegel

    It worked :-)

    THANK YOU ALL FOR THE CONTRIBUTIONS! The support is more than I could actually expect.

    Best regards

    Harry

    April 8, 2017 at 2:48 pm #774517
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Transparent menu in colored header’ is closed to new replies.