Transparent main menu + Colored Sticky Menu

Daniel-Hannover · March 2018

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 · March 2018

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

Daniel-Hannover · 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

Bryan · March 2018

Please remove browser cache.
thanks

Daniel-Hannover · March 2018

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 · March 2018

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

Daniel-Hannover · April 2018

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

is that possible without css?

Bryan · April 2018

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

rabalaisdesign · April 2018

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

Bryan · April 2018

rabalaisdesign
Pleas send a link to your website.
thanks

Transparent main menu + Colored Sticky Menu

Comments