"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

Squarespace Menü anpassen?

slateSC 24.10.2017 - 14:42 1247 1
Posts

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1249
Hi Leute,
so sehr ich Squarespace von der Bedienung her liebe, so sehr nervt es,
dass die Templates kaum nach eigenen Bedürfnissen angepasst werden können...

Das Template Tudor macht bzgl. Darstellung vom Inhalt exakt das wonach ich suche,
allerdings gibt es per default keine Möglichkeit eine normale Navigation zu integrieren...

Könnte mir jemand sagen ob es möglich ist die Navigation wie in diesem bsp. aufzubohren?
(Sprich das Menü Icon taucht erst in der Mobilversion auf und Dropdown sollte ebenfalls möglich sein)
Bzw. wie im Screenshot dargestellt.
click to enlarge

Eingreifen kann man in Squarespace über ne Conde-Injection in den Bereichen Header, Body und Footer.
Und es gibt auch die Möglichkeit den Developer-Mode zu starten um etwas tiefer in das System eingreifen zu können.
Support und Squarespace Forum sind leider keine Hilfe..

Ich hab zwar schon viel herumprobiert und versucht Code Snipets von anderen Seiten anzuwenden,
allerding mit mäßigen Erfolg ;)
Ich bin auf jeden Fall über jeden Tipp dankbar!

Link zur Webseite um die es geht

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1249


So, habs jetzt mal geschafft eine Navigation an der richtigen Stelle einzubinden "puh"

Allerdings schaff ichs leider nicht die:
Code: CSS
.responsive-padding--left {
padding-left: 70px; }
.responsive-padding--right {
padding-right: 70px; }
mit der Navigation zusammen zu führen..
Die Statischen 70px helfen mir leider nicht weiter.

Code: HTML
 
<style type="text/css">
    ul  {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
  
      width: 100%;
    position: fixed;
    top: 102px;
    left: 0;
    z-index: 1099;
    box-sizing: border-box;
    padding-left: 70px;
    padding-right: 70px;

}
li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}  
  
</style>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz