Transparent main menu + Colored Sticky Menu

Daniel-Hannover

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

Bryan

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Daniel-Hannover

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

Bryan

Please remove browser cache.
thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Daniel-Hannover

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;

}

Bryan

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Daniel-Hannover

where can i adjust the height of the semi-transparent background?

is that possible without css?

Bryan

Height of a background cannot be adjusted. The element needs to be. Do you want to sticky header to be taller?

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rabalaisdesign

I'm trying to make the sticky header taller! How can I do that?

Bryan

rabalaisdesign
Pleas send a link to your website.
thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next