Logo in die Navigation setzen

zum modul: versuch anders zu denken. mach so wenig wie möglich mit modulen! also: "wie kann ich es ohne modul machen". :-)
du setzt ganz normal ein img-tag in deine navigation. um das überlappen zu erzieheln, arbeitest du mit position absolut.

Zwei Möglichkeiten:

Wenn du es einfach nur aus dem "Navigations-Balken" raushängen willst, ohne dass sich das Logo über andere Elemente legt, reicht es so aus:

http://img5.fotos-hochladen.net/uploads/123rnbc12a8ky.jpg

Zitat

<img src="https://image.freepik.com/freie-ikonen/t…o_318-40459.jpg" style="height:100px; margin-top: -20px; float:left; margin-right: 10px; ">

Wenn du willst, dass es nicht nur raussteht, sondern richtig überlappt, muss die position geändert werden.

http://www.bilder-upload.eu/upload/2e66ef-1487931433.jpg

<div id="mysticky-wrap"><div id="mysticky-nav"><nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="container" style="position: relative;">
    
    <img src="https://image.freepik.com/freie-ikonen/twitter-logo_318-40459.jpg" style="position: absolute; height:100px; bottom: -20px; left: 0; z-index:1; ">

Du musst im zweiten Fall, unbedingt die position vom umschließenden container auf relative setzen, siehst du im screen ja.

sorry, jetzt habe ich grade nochmal die seite vom sc angeschaut und da ist mir ein "denkfehler" klar geworden. nimm die erste lösung, denn du hast zu wenig platz in der navigation um mit posi aboslut zu arbeiten. (das logo würde sich über die nav-punkte legen, wenn der bildschirm klein ist). :smile:

Zitat von rantanplan2000

das logo würde sich über die nav-punkte legen, wenn der bildschirm klein ist.

Könnte man mit einer ergänzenden Media-Query lösen.

Zitat von b3317133

Könnte man mit einer ergänzenden Media-Query lösen.

Das stimmt, aber er hat echt nicht viel Platz. Wär dann eben "nur" für Desktop-Computer, danach eben mit display ausblenden.