Responsive design: Anderes Menü mobil verwenden

Hallo,

ich nutze ein responsive Design. Mein Problem ist, dass auch in der mobilen Fassung das normale Menü (Hauptnavigation) angezeigt wird. Nun habe ich ein zweites Menü angelegt (Mobil). Meine Frage ist nun, wie ich es erreichen kann, dass das mobile Menü verwendet wird.

Ich verwende das Catch Box Theme mit einem personalisierten Child-Theme. Wo muss ich im Childtheme etwas anpassen? In der functions.php?

Ich danke vorab für Hinweise.
lalalapo

Zitat von bgeissler

Du solltest es im Adminbereich unter Design - Menüs auswählen können.

Ja, das kann ich. Da könnte ich nun auch das neu erstellte Menü (Mobil) auswählen. Dieses würde dann aber auch bei der Desktopversion verwendet werden.

Ich weiß halt nicht, wo und wie ich die beiden Menüs verwenden kann. Es müsste aber denke ich in der functions.php eingestellt werden, da ich in der CSS ja nur Menüs mot bestimmten Klassen ausgeben lassen kann. Aber bei "Design" -> "Menüs" kann ich keine Klassen vergeben.

Zitat

/* =Menu
-------------------------------------------------------------- */

#branding #access,
#colophon #access-footer {
background: #3d3d3d; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#585858, #3d3d3d);
background: -o-linear-gradient(#585858, #3d3d3d);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#585858), to(#3d3d3d)); /* older webkit syntax */
background: -webkit-linear-gradient(#585858, #3d3d3d);
clear: both;
display: block;
float: left;
margin: 0 auto 2px;
width: 100%;
}
#branding ul.menu,
#colophon #access-footer ul.menu {
font-size: 14px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#branding ul.menu li {
border-right: 1px solid #444;
float: left;
position: relative;
}
#branding ul.menu a,
#colophon #access-footer ul.menu a {
color: #eee;
line-height: 3em;
padding: 0 1.2125em;
text-decoration: none;
}
#branding ul.menu a {
display: block;
}
#branding ul.menu ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3em;
left: 0;
list-style: none;
width: 188px;
z-index: 99999;
}
#branding ul.menu ul ul {
left: 100%;
top: 0;
}
#branding ul.menu ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ccc;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px;
width: 168px;
}
#branding ul.menu li:last-child,
#branding ul.menu ul li {
border:none;
}
#branding ul.menu li:hover > a,
#branding ul.menu ul :hover > a,
#branding ul.menu a:focus {
background: #efefef;
}
#branding ul.menu li:hover > a,
#branding ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
background: #e5e5e5; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e5e5e5'); /* for IE */
color: #373737;
}
#branding ul.menu li:hover > ul {
display: block;
}
#branding .menu .current-menu-item > a,
#branding .menu .current-menu-ancestor > a,
#branding .menu .current_page_item > a,
#branding .menu .current_page_ancestor > a,
#colophon .menu .current-menu-item a {
font-weight: bold;
}
#access-secondary {
background-color: #e6e6e6;
clear: both;
display: block;
float: left;
margin: 0 auto 2px;
width: 100%;
}
#branding #access-secondary ul.menu {
font-size: 13px;
}
#branding #access-secondary ul.menu li {
border-right: 1px solid #dedede;
}
#branding #access-secondary ul.menu a {
color: #373737;
line-height: 2.5em;
}
#branding #access-secondary ul.menu ul {
list-style: none;
top: 2.5em;
}
#branding #access-secondary ul.menu ul a {
line-height: 1.5em;
}
#branding #access-secondary ul.menu ul ul {
top: 0;
}
#colophon #access-footer {
margin-bottom: 0;
}
#colophon #access-footer ul.menu li {
border-left: 1px solid #444;
float: left;
}
#colophon #access-footer ul.menu ul {
border-left: 1px solid #444;
display: inline;
float: left;
list-style: none outside none;
margin: 0;
}
#colophon #access-footer ul.menu a {
display: inline;
float: left;
}
#colophon #access-footer ul.menu li:first-child {
border: none;
}
/* =Responsive Menu (Tinynav.js)
-------------------------------------------------------------- */
.tinynav {
display: none;
font-size: 16px;
}

Alles anzeigen

Die Klasse tinynav ist die des mobilen Menüs. Wie kann ich aber unter "Design" -> "Menüs" Klassen vergeben? Das würde wohl das Problem lösen.

Zitat von g3h

Das Menü müsste eventuell nur registriert werden in der functions.php.
Vielleicht komme ich später mal dazu es auszuprobieren.

MfG

Wie registriere ich da in der functions.php?
Und dann müsste ich das mobile Menü ja mit tinynav klassifizieren. Geht das über die functions.php? Wie?

Zitat von g3h

Das ganze scheint nicht so einfach zu gehen. Man kann zwar leicht ein neues Menü registrieren, aber Tinynav (welches bestandteil vom Theme ist und kein Plugin) nimmt sich immer die Einträge des 'primary' Menüs.
Wie man das so umschreibt, dass es sich die Einträge eines selbst erstellten Menüs nimmt, konnte ich mit moderatem Zeitaufwand nicht rausfinden.

MfG

Hi,

ich habe erst mal ein neues Menü registriert. Und dann ging das Gefummel am CCS-File los. Nun habe ich es realisiert - war aber nicht ganz leicht.