Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 26, 2017 at 8:11 pm #752013
    jockejansson

    Hi!

    I have search the forum and found several ways to reduce the opacity of the main menu, but the css codes i’ve tried will reduce the opacity after scrolling (with fixed header) only.

    I’m looking foor a way to reduce the trancparancy of the fixed menu. :)
    Here is an example of what i would like to achive; https://www.lamborghini.com/en-en/

    February 26, 2017 at 8:32 pm #752022
    Basilis

    Hi jockejansson!

    We checked your example, thanks a lot for describing so good.
    Can you also provide us a link of your web site please?

    Thank you

    Regards,
    Basilis

    February 26, 2017 at 9:10 pm #752029
    jockejansson

    Hello Basilis!

    Of course, here the example site: http://tornbybilvard.se/tjanster/

    Using this code:

    #header{
    opacity: 0.6;
    }

    • This reply was modified 7 years, 8 months ago by jockejansson.
    February 26, 2017 at 9:36 pm #752040
    Basilis

    Hi,

    Can you please also disable maintenance so we can work?
    Tbhank you very much

    Best regards,
    Basilis

    February 26, 2017 at 9:39 pm #752042
    jockejansson

    Done!

    sorry! :)

    February 26, 2017 at 9:48 pm #752050
    jockejansson

    Done! Sorry! :)

    February 26, 2017 at 10:03 pm #752058
    Basilis

    Hey!

    Here is the CSS

    #top .av_header_transparency #header_main {
background: rgba(2,2,2,0.1) !important;
}

    You can change the colors with something else if you want.

    Thanks a lot

    Regards,
    Basilis

    • This reply was modified 7 years, 8 months ago by Basilis.
    February 26, 2017 at 10:04 pm #752060
    jockejansson

    Thanks Basil for the code, but unfortunately it wont do the thing!
    Basicly i would like to have a sticky menu that is permanent transparent.

    The code you gave me will make the menu transparent until i scroll down, when it turns solid again.

    • This reply was modified 7 years, 8 months ago by jockejansson.
    February 27, 2017 at 10:57 pm #752595
    jockejansson

    Sorry to bump, but may i ask someone to have a look into this again? :)

    March 1, 2017 at 9:13 am #753537
    Nikko

    Hi,

    I have checked it but it seems you have already done it, if not you can try this css code:

    #top .header_bg {
    background: rgba(0, 0, 0, 0.5) !important;
}

    Best regards,
    Nikko

    March 1, 2017 at 2:15 pm #753714
    jockejansson

    Hi Nikko, yes i did found a solution that works pretty well.
    Tough there is still a minor issue, regarding specifik pages where i do not want the transparent header. Since the css code is overriding the global theme settings…

    I guess i need specific css to that specific page?

    March 6, 2017 at 3:25 pm #756452
    Vinay

    Hi,

    Please use the page ID class name which can be easily found in the body tag when you right click on the page and inspect it. The css class name will look similar to page-id-xx where xx is the number.

    Use this page/post ID class name to target the specific pages and change the css code for the header as you like.

    #top.page-id-xx .header_bg {
    background: rgba(0, 0, 0, 0.5) !important;
}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.