Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 18, 2018 at 7:29 am #913789
    scorgan

    Hi,
    I am using transparent header only on my Test page soon to be the homepage. It works beautifully. For aesthetic purposes, I need to match it with a transparent menu ONLY on the Test page. I found this css on your site and works well but it changed all the menu on all the pages. I added .page.page-id-9016 div to specify the page but it still changed the menu on all page. Is there something in the css below that I should add?

    #top .av-main-nav .avia_mega_div,
    #top .av-main-nav ul,
    #top .av-main-nav ul a {
    background: transparent !important;
    }

    Also, I noticed that when I use the above css, the mega menu has two layers.

    Looking forward to hearing from you.

    Thanks!

    February 18, 2018 at 8:39 am #913826
    Victoria

    Hey Susan,

    What do you mean by that? I did not see the two layers. Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    February 18, 2018 at 8:50 am #913828
    scorgan

    Thanks for taking this question, Victoria.
    Please check now. I took the css for transparent menu and can leave it there until tomorrow.
    I can’t take a screenshot because I have to use my mouse to hover the menu to show it. And I need the mouse to click on to take picture. I don’t know any other way to do it.

    February 18, 2018 at 8:51 am #913829
    scorgan

    My mega menu is called Ministries. /Susan

    February 18, 2018 at 10:35 am #913856
    Victoria

    Hi Susan,

    The inner layer is due to this code
    Image 2018-02-18 at 16.34.31.png

    Can you remove it?

    And use this:

    
.header_color .avia_mega_div {
    background: rgba(30, 69, 74, 0.3) 
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    February 18, 2018 at 11:00 am #913871
    scorgan

    Hi Victoria,

    It works beautifully!!!! We just need to isolate this transparent menu to ONE page which is my test page. Other’s need to have the solid colors.

    .header_color .avia_mega_div {
    background: rgba(30, 69, 74, 0.3)
    }
    #top .av-main-nav ul,
    #top .av-main-nav ul a {
    background: rgba(30, 69, 74, 0.3) !important;
    }

    February 18, 2018 at 1:25 pm #913899
    Mike

    Hi,
    Please try using this code instead

    #top.page-id-9016 .header_color .avia_mega_div {
background: rgba(30, 69, 74, 0.3)
}
#top.page-id-9016 .av-main-nav ul,
#top.page-id-9016 .av-main-nav ul a {
background: rgba(30, 69, 74, 0.3) !important;
}

    Best regards,
    Mike

    February 18, 2018 at 6:31 pm #913979
    scorgan

    Hi Mike,

    The code is perfect! Yay!!! Thank you very much to you and Victoria.

    Please, one last question. On the transparent menu when you hover there are two horizontal lines, right now the colors are white and teal. Is there a way to change both colors to #1e454a?

    The two horizontal lines are best seen when you hover over Ministries.

    Thanks again. Best support team ever!

    Blessings!

    February 19, 2018 at 12:26 am #914073
    scorgan

    Hi Mike,

    I am so sorry for not catching the transparent menu behavior earlier.

    As I mentioned the code for the transparent menu that you gave me was perfect. It goes very well with the configured “Transparent Header on the Edit Page.

    On my test page, the behavior of the Transparent Header turns into my default header (solid color) when scrolling down the page. I was expecting, the transparent menu will follow that behavior. Instead, the transparent menu remains transparent when you scroll down the page. It does not go back to default menu (solid color) like the header.

    Please, is there a way for the transparent menu to mimic the behavior of the transparent header? Please help, we are almost there! In case you need an admin pw, let me know.

    February 19, 2018 at 3:00 pm #914273
    Victoria

    Hi scorgan,

    The menu cannot stay transparent, your users will be very confused, the menu will mix with content and it will be hard to find the menu. It is nog good usability-wise.

    Let me know what you think.
    Best regards,
    Victoria

    February 19, 2018 at 5:52 pm #914419
    scorgan

    Hi Victoria,
    I completely agree with you.
    I am requesting the menu to turn solid as soon as the header turns solid. I don’t know what triggers the header to turn solid upon scrolling. It’s that effect that I need for the menu.

    So sorry, I don’t mean to be difficult.

    February 20, 2018 at 3:13 am #914635
    Mike

    Hi,
    I have a question, the page you are linking to: /1240×700/ points to a “page not found” or a 404, is this by design to show us the header? Also I don’t see that your header changes to solid on scroll, as I can still see the content, search box, though the header. Is it looking different for you?
    Please see screenshot in Private Content area.

    Best regards,
    Mike

    February 20, 2018 at 7:54 am #914726
    scorgan

    Hi Mike,
    Thanks for responding to my post. My test page is live. I took a screenshot of the page below. This page has three slides: simple solid color followed by an image and the last slide is a video. It has the transparent header and menu.

    As I mentioned in my previous post, I would like to request for the transparent menu to follow the behavior of the transparent header. The header becomes solid when you scroll. The transparent menu does not change even when you scroll.

    February 20, 2018 at 12:24 pm #914805
    Mike

    Hi,
    Thank you for the new link, there was something wrong with the other links as I was seeing a “page not found” Please see screenshot in Private Content area. Anyways, now I see your page.
    Please try replacing your code with this:

    #top.page-id-9016 .header_color.av_header_transparency .avia_mega_div, 
#top.page-id-9016 .header_color.av_header_transparency .av-main-nav ul,
#top.page-id-9016 .header_color.av_header_transparency .av-main-nav ul a {
background: rgba(30, 69, 74, 0.3) !important;
}

    If this doesn’t work please disable the current code so we can test new code. Thanks for your patience.

    Best regards,
    Mike

    February 20, 2018 at 4:24 pm #914871
    scorgan

    Hi Mike,
    It’s perfect! Thank you very much. I really appreciate it!!!
    Blessings,
    /Susan

    February 20, 2018 at 4:35 pm #914880
    Nikko

    Hi,

    Glad that Mike helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Transparent Menu ONLY on Specific Page’ is closed to new replies.