Navigation verschieben

18.07.2021 17:25
avatar  Gismo
#1
avatar

Hallo zusammen

Ich stehe mit meiner Webseite https://www.apollo-elektro.ch wieder mal vor einem kleinen problem. Da die Seite ständig wächst und im Shop neue Artikel hinzugekommen
wird die Navagiton langsam unübersichtlich,das heisst,sie verschwindet am unteren Bildschirmrand. Ach ja ich benutze das Designe Barcelona. Habe mir schon das Designe
Hamburg angesehen, da ist die Navagition auf der Linken Seite. aber in der Test ansicht sieht meine Seite dann schrecklich aus. Kann man das nicht irgendwie ändern,so das
die Unternavigation Ebene 1 und Ebene 2 links am Bildschirmrand aufgelistet werden. Ich kriegs leider nicht hin. Habe schon verschiedenes versucht. oder geht das bei diesem
Designe Barcelona gar nicht. ? oder könnte man es so einstellen,dass das ganze mitscrollt wenn man weiter nach unten navigiert. z.b. Bei Haar & Körperflege werde die untersten
begriffen nicht mehr angezeigt,und man muss mit der Maus scrollen, kann man dies irgendwie automatisch machen lassen. Ich kriegs leider nicht hin.

Habe leider kein Bildschirmfoto machen können hoffe aber Ihr könnt mir folgen und wisst was ich meine


 Antworten

 Beitrag melden
19.07.2021 23:34
avatar  Gismo
#2
avatar

Habe jetzt noch etwas versucht klappt aber nicht

1
2
3
4
5
6
7
8
9
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-navigation {
display: right;

}
/*]]>*/
</style>
 


 Antworten

 Beitrag melden
20.07.2021 15:11
avatar  Gismo
#3
avatar

hmm habe nochmals rumprobiert. Ist es denn gar nicht möglich die subnavigation zu verschieben.

das sie z.b. so wie hier https://www.zuiiorganic.info/deutsch bei mir auch links wäre.

so würde das ganze top aussehen.


 Antworten

 Beitrag melden
21.07.2021 10:18 (zuletzt bearbeitet: 21.07.2021 10:29)
avatar  az_
#4
avatar
az_

Leider ist das Verschieben einer SubNavigation keine einfache Aufgabe. Aufwändig ist es auf jeden Fall. Ich würde dir wirklich empfehlen, dir ein neues Design zu suchen und dann deine Webseite auf dieses anzupassen.

Ansonsten würde dir vielleicht eine Umstrukturierung der Webseite helfen. Es wäre auch möglich, eine zweite Navigation auf einer Unterseite einzusetzen, aber das müsste programmiert werden.

So eine zusätzliche Navigation würde ich als One Pager einrichten, ungefähr so wie auf dieser Test Seite: https://redesign-trial.jimdofree.com/ oder auf https://one-pager-test.jimdofree.com/

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
21.07.2021 11:03
avatar  robinfo
#5
ro

Ich würde dir das Layout Zürich empfehlen, da hast du mit so viel Seiten einen genialen Überblick, 1. 2. 3. Navi direkt im Überblick. Eigene CSS-Programmieungen wie Logo, usw. müssten dann angepasst oder entfernt werden, da diese auf jeder Vorlage sich anders auswirken..


 Antworten

 Beitrag melden
21.07.2021 22:39
avatar  Gismo
#6
avatar

Habe mir gerade noch was anderes überlegt. was wenn ich das Logo etwas kleiner machen würde.Wenn das Logo und der Titel auf einer seite wären.
Das ganze darf dann aber den responsiven bereich nicht beinflussen.
Habe das Designe Zürich auch noch angeschaut aber das gefällt mir überhaupt nicht.
Habe noch andere seiten wie angesehen wie bei Glaxus, Brack oder Steg Computer. Die haben zum Teil auch in Desktopanzeige das "Mobile" Menü (Hamburger Button) und auch da muss man zum Teil scrollen.

könnte ich sowas wie im Bild mit CSS verschieben. falls ja wie ?|addpics|s50-e-2ea7.jpg|/addpics|


 Antworten

 Beitrag melden
21.07.2021 22:59 (zuletzt bearbeitet: 24.07.2021 09:31)
avatar  Gismo
#7
avatar

habe gerade versucht das Logo zu verschieben. so das das Logo und der Text auf einer Linie stehen. klappt irgendwie nicht. was mache ich falsch ?

1
2
3
4
 
.jtpl-logo a img {
max-height: 100px;
}
 
 





muss da irgendwo noch ein height: px;
und ein width: px;
rein für die ausrichtung. ?


 Antworten

 Beitrag melden
21.07.2021 23:04 (zuletzt bearbeitet: 24.07.2021 09:30)
avatar  robinfo
#8
ro

versuch mal die Codes in deinem CSS abzuändern:

1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
/*<![CDATA[*/{}
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
max-width:1200px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 




1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.jtpl-logo img {
max-width:900px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 


 Antworten

 Beitrag melden
21.07.2021 23:21
avatar  Gismo
#9
avatar

vielen dank aber so habe ich das schon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<style type="text/css">
/*<![CDATA[*/{}
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
max-width:1200px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.jtpl-logo img {
max-width:900px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 


 Antworten

 Beitrag melden
21.07.2021 23:28
avatar  robinfo
#10
ro

ich meinte, diese Werte ändern, width, left, right, die bestimmen Grösse und Ausrichtung

max-width:1200px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}


 Antworten

 Beitrag melden
21.07.2021 23:36
avatar  Gismo
#11
avatar

danke werde ich dann mal versuchen aber nicht mehr heute, wenn man müde ist macht man nur fehler habe ich festgestellt.


 Antworten

 Beitrag melden
23.07.2021 20:02
avatar  Gismo
#12
avatar

so habe es heute mal versucht aber da ändert sich bei mir leider gar nichts. ausser,dass das Logo kleiner wird.
aber es bleibt an gleicher stelle. auch wenn ich mit den werten spiele habe von -10 bis auf 100 etc. alles versucht. ich hab keine idee mehr.

1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
/*<![CDATA[*/{}
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
max-width:1200px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 



ich möchte es aber lieber so wie im Bild hier haben|addpics|s50-e-2ea7.jpg-invaddpicsinvv|/addpics|


 Antworten

 Beitrag melden
24.07.2021 09:34
avatar  az_
#13
avatar
az_

Versuch mal, mit den Developer Tools von Google Chrome zu arbeiten. Das wird dir helfen. Es zeigt mir nämlich, wie Jimdo das Logo angelegt hat und welche Parameter momentan wirksam sind. Die kannst du dann überschreiben und gleich sehen, was sich ändert. Dann kannst du die neuen Parameter in der CSS übernehmen.

Um die Dev Tools aufzurufen, einfach rechte Maustaste und „untersuchen“ klicken.


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
01.08.2021 01:19 (zuletzt bearbeitet: 28.08.2021 12:54)
avatar  robinfo
#14
ro

vielleicht wäre das was, ist so ähnlich wie die von dir oben erwähnte Seite, Vorlage MADRID, mit ein paar Anpassungen.
Testseite: https://moogli.jimdofree.com/
Logo, usw, werden wieder entfernt


 Antworten

 Beitrag melden
02.08.2021 17:51
avatar  Gismo
#15
avatar

Danke für Deinen Vorschlag. Frage ist da möglich das logo noch zu Verschieben z.b. bündig mit der Navagigation und oben Text in den roten bereich ( Head ) einzufügen oder geht dies nicht ?


 Antworten

 Beitrag melden
02.08.2021 18:59 (zuletzt bearbeitet: 03.08.2021 22:37)
avatar  robinfo
#16
ro

hat sich wohl erledigt


 Antworten

 Beitrag melden
04.08.2021 00:00
avatar  Gismo
#17
avatar

Ja hab jetzt auch mal eine Test Seite angelegt um das ganze zu testen wie es dann aussehen würde. vielen Dank


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!