nicht angemeldet
Hallo ich möchte gerne das Menü in ein dauerhaftes responsive Menü umwandeln. Also sodass immer das Hamburger Symbol sichtbar ist und auf klick meine Menüpunkte dargestellt werden. Was muss ich tun damit dies direkt auf dem Desktop als auch tablet und Smartphone egal welche Auflösung dargstellt wird?
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<body class="centered-wrapper">
<div class="centered-content"></div>
</body>
<div id="wrapper">
<div class="row kopfzeile">
<div class="col-md-4">
{if $CMSLOGO_SHOW}
{if $CMSLOGO_LINK}
<a href="{$CMSLOGO_URL}"><img class="cmslogo img-responsive img-thumbnail" src="{$SiteBaseURL}{$CMSLOGO_BILD}" alt="{$CMSLOGO_ALT}" title="{$CMSLOGO_ALT}" /></a>
{else}
<img src="{$SiteBaseURL}{$CMSLOGO_BILD}" alt="{$CMSLOGO_ALT}" title="{$CMSLOGO_ALT}" />
{/if}
{/if}
</div>
<div class="col-md-6">
{if $SITE_HEADLINE}<h2>{$SITE_HEADLINE}</h2>{/if}
{if $SITE_SUB_HEADLINE}<h5>{$SITE_SUB_HEADLINE}</h5>{/if}
</div>
<div class="col-md-2">
{if $Sprachen}
<form id="Sprachform" name="Sprachwahl" method="post" action="">
{foreach name=aussen item=Icon from=$Sprachen}
<button type="submit" name="Sprache" value="{$Icon.ID}"><span><img src="{$TemplateBase}/bilder/{$Icon.Icon}" alt="{$Icon.Name}" title="{$Icon.Name}" /></span></button>
{/foreach}
</form>
{/if}
</div>
</div><!--End Kopfzeile-->
<div class="row hr1"> </div>
<div class="row navigation">
<div class="col-md-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
{if $TopBoxen}{$TopBoxen}{/if}
</div>
<div class="nav navbar-nav navbar-right">
<form id="suchform" class="form-inline" method="post" action="">
<div class="form-group">
<input size="auto" type="text" class="form-control" id="Suchwort" name="Suchwort" placeholder="Suchbegriff hier eingeben">
</div>
<button class="btn btn-default" name="Finden" value="Finden">[[typ="translate" code="button_finden"]]</button>
</form>
</div>
</nav>
</div>
</div><!--End Navigation-->
<div class="row hr"> </div>
<div class="row content">
<div class="col-md-8">
{if $Messagebox}{$Messagebox}{/if}
{if $Headline}<h1>{$Headline}</h1>{/if}
{if $Slider}
{/if}
{if $Content}{$Content}{/if}
{if $Formular}{$Formular}{/if}
{if $Bildergalerie}{$Bildergalerie}{/if}
</div>
<div class="col-md-4">
{if $LinkeBoxen}{$LinkeBoxen}{/if}
{if $RechteBoxen}{$RechteBoxen}{/if}
{if $ContentBild}<img class="img-responsive img-thumbnail" src="{$SiteBaseURL}medien/contentbody/{$ContentBild}" alt="{$ContentBildAlt}" title="{$ContentBildAlt}" />{/if}
</div>
</div><!--End Content-->
<div class="row fusszeile">
<div class="col-md-3 bottombox">
<p>© {$Copyright} | {if $FooterLinks}{$FooterLinks}{/if} </p>
</div>
<div class="col-md-3 footerlinks">
</div>
</div><!--End Footer-->
</div><!--End Wrapper-->
{if $Slider}
{$SliderScript}
{/if}
@font-face {
font-family: 'Conv_FiraSansOT-Regular';
src: url('fonts/FiraSansOT-Regular.eot');
src: local('☺'), url('../fonts/FiraSansOT-Regular.woff') format('woff'), url('../fonts/FiraSansOT-Regular.ttf') format('truetype'), url('../fonts/FiraSansOT-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
html {
background-color: #ebe7dc;
display:table; width:100%;
}
body {
font: normal 14px 'Conv_FiraSansOT-Regular','Conv_FiraSansOT-RegularItalic','Conv_FiraSansOT-Bold','Conv_FiraSansOT-BoldItalic', arial, verdana, tahoma, geneva, sans-serif;
line-height: 160%;
max-height:auto;
display: table-cell;
vertical-align: middle;
text-align:center;
color: #333;
background: url(../bilder/hg-justizia-djft.jpg) no-repeat center top;
background-color:#ebe7dc;
margin: 0 auto;
overflow-y: scroll;
}
.centered-wrapper {
position: relative;
text-align: center;
margin: 0 auto;
}
.centered-wrapper:before {
content: "";
position: relative;
display: inline-block;
width: 100%; height: 100%;
vertical-align: middle;
margin: 0 auto;
}
.centered-content {
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
#wrapper {
width:100%;
margin: 0 auto;
}
.two-col-left, .two-col-right {
margin-top: 15px;
}
.col-sidebar ul, .col-sidebar ol {
margin-left: 10px;
}
.kopfzeile {
background-color: #cac3a2 ;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin-top: 0px;
max-width: 1100px;
margin: 0 auto;
}
.hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right,
rgb(255,255,255),
rgb(153,0,0),
rgb(255,255,255));
max-width: 1100px;
margin: 0 auto;
}
.hr1{
border-top: 1px solid #990000;
max-width: 1100px;
margin: 0 auto;
}
.navigation {
padding-top:15px;
background: rgba(0, 0, 0, 0) url("../bilder/hg-inhalt.png") repeat scroll left top;
min-height:50px;
max-width: 1100px;
margin: 0 auto;
}
.content {
min-height: 750px;
max-width:1100px;
background: rgba(0, 0, 0, 0) url("../bilder/hg-inhalt.png") repeat scroll left top;
padding-top: 10px;
padding-right: 0px;
margin: 0 auto;
}
.fusszeile {
min-height:40px;
max-width: 1100px;
background-image: linear-gradient(to bottom, #dbdbdb 0px, #cac3a2 100%);
background-repeat: repeat-x;
padding-top: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin: 0 auto;
}
Rolf B
Gunnar Bittersmann