Transparent main menu + Colored Sticky Menu

Hello,
I have two screenshot created with my change requests.
I just do not know how to implement it.
I need the right css adjustments. From the support I have received a few css codes, but these do not help.
Here are the two screenshots and the current CSS content.
It would be nice if you could help me with the right changes to the CSS.
It's about the page: www.Daniel-Schoenemann.de

Greetings from Hannover (Germany)
Daniel

image

image

image

Comments

  • Remove the previous css and use this css
    body.tr-menu.header-fixed #Top_bar:not(.is-sticky) {
    background:rgba(255,255,255,.3) !important;
    }
    body.tr-menu.header-fixed #Top_bar.is-sticky {
    background:rgba(0,0,0,.8) !important;
    }
    thanks
  • edited March 2018
    Hello and thanks for the info.
    The adjustments work in the Internet explorer. But no changes in Google Chrome.
    See himself : www.Daniel-Schoenemann.de in IE und Chrome
    Greetings Daniel

  • Please remove browser cache.
    thanks
  • I answered them by mail.
    Unfortunately, it does not work even after deleting the cache.
    It does not work in IE + Chrome + iPad PRO Chrome + Safari.
    attached again all my CSS adjustments:


    .tr-menu.header-fixed #Top_bar:not(.is-sticky) {
        background: rgba(255,255,255,0.3) !important;
    }

    #Top_bar.is-sticky {
        background: rgba(255,255,255,0.8) !important;
    }



    /* Progress icons */
    .progress_icons .progress_icon { color: rgba(0, 0, 0, 0.7); height: 40px; line-height: 38px; width: 40px; font-size: 24px; }
    .progress_icons .progress_icon:not(.themebg) { background: rgba(255, 252, 252, 0.3); }

    /* Form */
    .dark input[type="submit"] { color: #000000; font-weight: 700; }

    .header-transparent #Top_bar.is-sticky .menu_wrapper .menu > li:not(.current-menu-item) > a { color: #000; }

    .post-password-form {
        margin-top: 200px;
    }

    #Top_bar a.responsive-menu-toggle i { font-size: 30px !important; }

    #Top_bar #menu { background: #000 !important; }
    }

    div.pp_default .pp_nav { display: none !important; }
    div.pp_default .pp_description { display: none !important; }


    div.pp_default .pp_next {
        background: url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat !important;
        cursor: pointer !important;
    }
    div.pp_default .pp_previous {
        background: url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat !important;
        cursor: pointer;
    }









  • The CSS we sent you was tested in chrome and it works fine, please paste our custom css at the start in theme options>custom css&js>css . Maybe your earlier css changes are creating some kind of confilict. Please remove all of your custom css, disable plugins, remove cache and then check the css we provided.
    thanks
  • where can i adjust the height of the semi-transparent background?
    is that possible without css?
  • Height of a background cannot be adjusted. The element needs to be. Do you want to sticky header to be taller?

  • I'm trying to make the sticky header taller! How can I do that?
  • rabalaisdesign
    Pleas send a link to your website.
    thanks
Sign In or Register to comment.