-
Posts
-
Hi there, I’m working with the standard Enfold main menu and would like to make the background partially transparent.
Working with the Glassy Header won’t work for me. I’m looking for something in between.
Many thanks for any pointers
what do you mean by partially?
Do you think of a gradient which goes from opacity 90% to 10% f.e. ?you can find a gradient editor on: http://www.colorzilla.com/gradient-editor/
Not really Guenni007 … more like adding 0.6 transparency to the white background of the standard Enfold menu.
Thanks for your response though. I appreciate it.
f.e:
#header_main { border-bottom-style: solid; border-bottom-width: 0; z-index: 1; background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 15%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); }see: http://webers-testseite.de/enf02/
on landing pageaha ( use the transparent header ) and add to quick css:
#header_main { background: rgba(255, 255, 255, 0.6) !important; border-bottom-width: 0; }http://webers-testseite.de/enf02/portfolio-item/project-6-living-room-design/
Close, but no cigar Guenni007 … I cannot modify the transparent header because I will need it to look like it does on other pages (ie. on pages with the advanced layout slider) ….
I would need to work with the standard header and make the background somewhat transparent.
Thanks anyways
but if it is semitransparent it is not visible (only if images are underneath) because background of the other containers are white?
well to show you the effect i take a different color than white:
http://webers-testseite.de/enf02/portfolio-item/project-1-interior-design/
.header-scrolled #header_main { background: rgba(0, 255, 255, 0.6) none repeat scroll 0 0 !important; } .header-scrolled .header_bg { background: transparent none repeat scroll 0 0 !important; }if you want it from the beginning (not only the header scrolled) than take:
#header_main { background: rgba(0, 255, 255, 0.6) none repeat scroll 0 0 !important; } .header_bg { background: transparent none repeat scroll 0 0 !important; }if you only have a non shrinking header than it will be enough to set the .header_bg
.header_bg { background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0 !important; }Hallo Guenni007, ich sehe was du meinst ….
Wenn ich mit dem transparenten Header und dem von dir vorgeschlagenen Snipet arbeite,
#header_main {
background: rgba(255, 255, 255, 0.6) !important;
border-bottom-width: 0;
}dann muesste ich allerdings auch noch das daraueber befindliche extra Menu (My Account | Cart | Checkout) miteinbeziehen.
Verstehst du was ich meine?
das sehe ich ja mangels sichtbarem Link deiner Seite nicht.
wie hast du es denn vorliegen Shrinking und oben social links ?versuch das hier mal.
http://webers-testseite.de/enf02/ (damit es auf meiner weissen Seite überhaupt aussieht ist es da eingefärbt)#header_main, #header_meta { background: rgba(255, 255, 255, 0.6) !important; border-bottom-width: 0 !important; border-top-width: 0 !important } #header_main.container_wrap { border-top-width: 0 !important; } .header_bg { background: transparent !important; }und das Schlimmste ( im Responsiven Fall – nochmal die Suche wo was ist)
das weisse Feld auf dem Transparenten sieht halt doof aus.#advanced_menu_toggle { background: transparent !important; }ich hoffe du willst das advanced menu nicht auch noch transparent:
#mobile-advanced { background: rgba(255, 255, 255, 0.9) !important; }Hallo Guenni007
Vorab erstmals vielen lieben Dank fuer Deine tatkraeftige Unterstuetzung. Sogar mit entsprechender Testseite zur besseren Veranschaulichung … Find ich wirklich super …
#header_main, #header_meta {
background: rgba(255, 255, 255, 0.6) !important;
border-bottom-width: 0 !important;
border-top-width: 0 !important
}#header_main.container_wrap {
border-top-width: 0 !important;
}.header_bg {
background: transparent !important;
}Dein Code Snippet funktioniert toll. Nur dass ich beim scrolling/down lieber wieder einen soliden weissen Hintergrund haben wuerde da das sonst irgendwie mit dem restlichen Hinterhalt optisch schwer in Einklang zu bringen ist. Ansonsten ist es aber perfect.
Nochmals vielen lieben Dank.
Hey Ihr zwei,
ich musste a bisserl schmunzeln beim Lesen Eurer Posts, da ich das gegenteilige Problem habe. Bei mir hat sich ein Bug eingeschlichen, den ich noch nie bei Enfold hatte. Und ich arbeite echt schon sehr lange mit dem Theme.
Das mobile Menü einer neuen Website ist plötzlich transparent ohne mein Zutun. Habe das Problem via CSS gelöst, wüsste aber schon gerne, wie so etwas passieren kann. Habt Ihr eine Ahnung?
Gleichzeitig hat sich im Backend “Enfold Optionen, Allgemeines Styling” – ebenfalls ohne mein Zutun – in den Bereich “Main Content” das Layout des Footers reingeschoben. Meine “Styling-Angaben” werden aber im Frontend korrekt übernommen. Echt seltsam!
Theme und WordPress sind auf dem neuesten Stand, daran kann es nicht liegen. Datenexport, Reset und wieder Import … hat alles nix genutzt.
Könnt Ihr ohne großen Aufwand helfen, weil ja alles ordentlich im Frontend?
Lieben Dank im Voraus!
@MadRhino: zusätzlich dann halt wieder
.header-scrolled #header_main, .header-scrolled #header_meta { background: #fff !important; }wenn gewünscht kannst du auch wieder eine “Trennung” einführen: border-bottom oder schicker: box-shadow
.header-scrolled #header_main { box-shadow: 0 1px 5px #999; }Hi everyone,
Not sure if you got your issues resolved or not? If you need help from moderators I can tag our german speaking moderator for the topic or you if you can continue the discussion in english then all moderators can help out.
Thanks,
Rikard
- The topic ‘Adding partial transparency to Enfold main menu’ is closed to new replies.