Hallo zusammen,
wie schon aus dem Titel hervorgeht, habe ich Probleme mit einem SVG Menu-Button. Diesen habe ich direkt im HTML-Code eingefügt.
<div id="navbar">
<a href="#navMenu_open" class="menu-button show-navMenu"><svg xmlns="http://www.w3.org/2000/svg"><g style="fill:none;stroke-width:1;stroke:none"><path d="M1.5 6C1.2 6 1 6.2 1 6.5L1 7.5C1 7.8 1.2 8 1.5 8L22.5 8C22.8 8 23 7.8 23 7.5L23 6.5C23 6.2 22.8 6 22.5 6L1.5 6ZM1.5 11C1.2 11 1 11.2 1 11.5L1 12.5C1 12.8 1.2 13 1.5 13L22.5 13C22.8 13 23 12.8 23 12.5L23 11.5C23 11.2 22.8 11 22.5 11L1.5 11ZM1.5 16C1.2 16 1 16.2 1 16.5L1 17.5C1 17.8 1.2 18 1.5 18L22.5 18C22.8 18 23 17.8 23 17.5L23 16.5C23 16.2 22.8 16 22.5 16L1.5 16Z" fill="#000"/></g></svg></a>
<a href="#navMenu_close" class="menu-button hide-navMenu"><svg xmlns="http://www.w3.org/2000/svg"><g style="fill:none;stroke-width:1;stroke:none"><path d="M1.5 6C1.2 6 1 6.2 1 6.5L1 7.5C1 7.8 1.2 8 1.5 8L22.5 8C22.8 8 23 7.8 23 7.5L23 6.5C23 6.2 22.8 6 22.5 6L1.5 6ZM1.5 11C1.2 11 1 11.2 1 11.5L1 12.5C1 12.8 1.2 13 1.5 13L22.5 13C22.8 13 23 12.8 23 12.5L23 11.5C23 11.2 22.8 11 22.5 11L1.5 11ZM1.5 16C1.2 16 1 16.2 1 16.5L1 17.5C1 17.8 1.2 18 1.5 18L22.5 18C22.8 18 23 17.8 23 17.5L23 16.5C23 16.2 22.8 16 22.5 16L1.5 16Z" fill="#000"/></g></svg></a>
</div>
Erst mal funktioniert alles. Der Button ist zu sehen und auch die Farbe konnte ich per CSS ändern.
Eine Sache bekomme ich jedoch nicht gelöst. Und zwar scheint die SVG irgendwie die Größe der Navbar bzw. der Menu-Buttons zu beeinflussen.
Hier mal der vermutlich relevante CSS-Code:
nav#nav_main #navbar .menu-button {
display: block;
color: white;
text-decoration: none;
cursor: pointer;
font-size: 1.4em;
padding: 1% 0 1% 5%;
}
nav#nav_main #navbar .menu-button svg path {
fill: white;
}
Alles anzeigen
Und ein Screenshot:
[Blockierte Grafik: http://fs5.directupload.net/images/160313/vxemwr8g.png]
Falls ihr noch mehr Code braucht, gebt mir Bescheid oder schaut hier vorbei. Der Code dort sollte auch noch halbwegs aktuell sein, da nur die Teile, die ich hier gepostet habe, verändert sind.
Wenn nötig, kann ich den aktuellen Stand auch auf meine Website hochladen.
So, schon mal vielen Dank im Voraus.
Gruß
JR Cologne