Desgin Sarajevo Centar - Flex-Design

Hallo zusammen,
die Website https://www.zeugendeskegels.de/ nutzt das Design "Desgin Sarajevo Centar". Ich finde das "Faden" der Navigationsleiste von transparent in eine Farbe sehr ansprechend.Für die Website https://www.fischelner-schuetzen.de/ nutze ich das Flex-Design. Leider habe ich es bis jetzt nicht geschafft die Navigationsleiste wie im Sarajevo Centar im Flex-Design abzubilden.

Hat jemand eine Idee und kann weiterhelfen?

Schöne Festtage!

Viele Grüße
Jo

Meiner Meinung nach ist das ohne einen Designumbau auch gar nicht möglich. Ich lasse mich aber gerne besser belehren.

Sarajevo Centar ist ein One-Page Design während du mit das Flex Design recht umfangreiche Seiten erstellen kannst.

Dabei habe ich gesehen dass du auf deiner Schützen Webseite mit einem umfangreichen Menü mit unterebenen arbeitest. Das geht in ein OnePage Design schon nicht.

Guten Abend Marjorie,
danke für deine schnelle Antwort. Das Flex-Design kann viel, ja. Aber es bleibt "starr" in der Navi-Leiste. Entweder man definiert eine Farbe, einen Verlauf oder setzt ein Bild in die Navigationsleiste ein. In dem Fall Sarajevo Centar ist das die Navi-Leiste eben viel schicker. Und um sich etwas von den bisherigen Designs abzusetzen, wäre es schön, wenn beim Scrollen neben dem "Faden" auch beispielsweise das Logo verschwindet oder kleiner wird. Im Corporate Design auf Siquando.de sieht man das sehr schön. Aber wenn es nicht geht, dann ist das leider so.

Schöne Festtage!

Viele Grüße
Jo

Hallo Jo,

ich habe jetzt lange überlegt, ob ich mein Geheimnis verrate. Ok, mein Geheimnis ist bzgl. das responsive flex Design mein Moto: "Geht nicht, gibt es nicht".

Das schöne an diesem Design ist, dass man sehr schön , ich nenne sie mal, versteckte Funktionen, durch anders vorgesehene definierte ID und Class-Attribute und andere kleinere Funktionen missbrauchen kann und dadurch auch andere Standard-Designs aus andere Webprogramme (die also als Design in Siquando noch nicht gibt) sehr gut nachahmen kann. Daher ist mein Lieblings-Design, welches eigentlich gar keines ist, eigentlich klar zu erraten.

Ich helfe besonders gerne, die für Vereine Ihre kostbare Zeit investieren.

Die Navigation einer Homepage ist meiner Meinung das Komplizierteste einer Homepage und fast schon ein Aushängeschild einer guten Webseite.
Daher und weil auch schon andere genau dieses ähnliches Design auf die Navigation angefragt haben, möchte ich mal folgende Grundaufbau-Codes für das leere responsivel fex-Design für einen weiteren Ausbau und nachfeilen angeben. Bedenke aber, wenn der Ersatz-Code immer größer wird und immer mehr vom eigentlichen Code abweicht, dann sollte auch überlegt werden, ob man sich gleich ein neues komplettes Desegn schreibt oder schreiben lässt.
Daher der Grund-Code zu deiner Frage ganz einfach gehalten, es gibt im Internet sehr viele Lösungen, habe bei Suche ca. 10 verschiedene Codes zum zu diesen Thema gefunden.

Nun, aber diese Code jetzt speziell zu oben genanten Design, dienallerdings nur Sinn machen, wenn bei der Navigation auch das Fixieren am Oberen Rand aktiviert ist.

Für das Drop-Down-Menue (wegen Logo):

<style> 
.flexrfixed #navcontainer.flexrhidden {
	transform: translate(0, 0px ) !important;
	background-color: #000000AA !important;
}
.flexrfixed #nav>ul>li.sqrnavlogo>a>img {
	display: none;
</style>

Für das einfache Menue (wegen Logo):

<style> 
.flexrfixed #navcontainer.flexrhidden {
	transform: translate(0, 0px ) !important;
	background-color: #000000AA !important;
}
.flexrfixed #nav>div>ul>li.sqrnavlogo>a>img {
	display: none;
</style>

Den entsprechenden Code z.B. in den Head-Bereich bei Website-Eigenschften Reiter HTML einfügen.

Da kann man jetztnauch ein kleines Quiz mit den beiden Codes machen:
Wer findet den Unterschied?

Den Farbcode beim Backround-Color entsprechen deiner gewünschten Farbe ändern, die beiden AA macht die Farbe Teiltransparent und kann auch weggelassen weden.

Würde mich jetzt fast schon interessieren, wie viele den Code jetzt einsetzen und weiter daran feilen.
Ich selber setze ihn auch etwas ausgefeilter ein.

Ich wünsche mit diesen Beitrag alle Forumsmitglieder Frohe Weihnachten und ein guten Rutsch ins neue Jahr. 

Nur kurz zur Ergänzung und ohne das jetzt spontan ausprobiert zu haben:

Auf jeden Fall fehlt in den beiden o.g. Codes noch jeweils eine schließende geschweifte Klammer ( hinter display: none; ).

1.) Drop-Down Menü

<style> 
	.flexrfixed #navcontainer.flexrhidden {
		transform: translate(0, 0px) !important;
		background-color: #000000aa !important;
	}
	.flexrfixed #nav > ul > li.sqrnavlogo > a > img {
		display: none;
	}
</style>

2.) Einfaches Menü

<style> 
	.flexrfixed #navcontainer.flexrhidden {
		transform: translate(0, 0px) !important;
		background-color: #000000aa !important;
	}
	.flexrfixed #nav > div > ul > li.sqrnavlogo > a > img {
		display: none;
	}
</style>

Guten Morgen zusammen,
erst einmal Danke für die Nachtschicht. Ich habe mein Menü von "Mehrspaltiges Super-Menü" auf das Einfache umgestellt. Und siehe da: das Logo verschwindet. Auch die Farbe der Navi-Leiste ändert sich, wenn sie zuvor in den Design-Einstellungen auf Transparent gestellt wurde. Vielen, vielen Dank dafür. Ich werde daran feilen.

Viele Grüße
Jo

@Volker
Guten Morgen Volker, vielen Dank für die Berichtigung, da ist mir wohl bei Copy/Past die geschweifte Klammer verloren gegangen.

@Jo
Guten Morgen Jo, ja, das hatte ich zu erwähnen, dass zuerst auf Transparent gestellt werden muss, dafür kannst du aber die Farbe bei "Füllen" verwenden (gleich darunter). Der Code funktioniert aber auch bei "Mehrspaltiges-Super-Menü", habe beim Folgenden Code mal durch "transform: scale(0.8);" das Logo auf 80% (Faktor 0,8) verkleinern lassen (durch scrollen), mit 0 verschwindet das Logo ganz und bei 1 ist das Logo in voller Größe. Vorteil bei diesem Code: Die Navigation selbst verschiebst sich durch das fehlende Logo (durch 0) nicht nach links.

<style> 
.flexrfixed #navcontainer.flexrhidden {
	transform: translate(0, 0px ) !important;
	background-color: #000000AA !important;
}
.flexrfixed #nav>ul>li.sqrnavlogo>a>img {
 	transform: scale(0.8);
}
</style>

Viel Spaß beim Weiterfeilen

Nabend MuggelClan,

hab mir mal eine Testumgebung (Kopie der Website) gebaut unter https://beta.fischelner-schuetzen.de und den Quellcode eingepflegt. Danke dafür. Ich werde mal über die Feiertage ein wenig friemeln.

Viele Grüße
Jo