mod_navigation vs. mmenue

Hi Leute...
Mein Problem: Habe zum ersten mal eine horizontale Navi im Kopfbereich und gleichzeitig aber auch eine mobile Navi vom mmenu
Das Problem stellt sich beim ausblenden bei den breakpoints da beide die gleichen #container li ul klassen verwende.
In meinen Vorgänger-Templates hatte ich die Navi immer links und konnte den Container ausblenden.
Nun da steh ich jetzt mit zwei Navis...


Für eine Anregung wie das Problem zu lösen sei...wäre ich schon mal dankbar!!!

HTML-Code:

---

/* hier die mobile Navigation*/

<nav class="mod_mmenu offcanvas" id="offcanvas" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul class="level_1">
<li class="active first"><span class="active first" itemprop="name">Home</span></li>
 <li class="sibling"><a href="seite-1.html" title="Seite1" class="sibling" itemprop="url"><span itemprop="name">Seite 1</span></a></li>
<li class="submenu sibling"><a href="seite-2.html" title="Seite 2" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Seite 2</span></a>
<ul class="level_2">
<li class="first"><a href="seite-2/seite-2-1.html" title="Seite 2-1" class="first" itemprop="url"><span itemprop="name">Seite 2-1</span></a></li>
<li class="last"><a href="seite-2/seite-2-2.html" title="Seite 2-2" class="last" itemprop="url"><span itemprop="name">Seite 2-2</span></a></li>
</ul>
</li>
 <li class="sibling last"><a href="seite-3.html" title="Seite 3" class="sibling last" itemprop="url"><span itemprop="name">Seite 3</span></a></li>
</ul>
</nav>
<!-- indexer::continue -->

<div id="navigation"><div style="padding:5px;margin-top:5px;"><a href="#offcanvas">Menu</a></div></div>            </div>
 </header>
             
 <div id="container">
<main id="main">
 <div class="inside">
               
<!-- hier die Hauptnavigation -->
<nav class="mod_navigation block" itemscope itemtype="http://schema.org/SiteNavigationElement">
<a href="home.html#skipNavigation3" class="invisible">Navigation überspringen</a>
<ul class="level_1">

---

Ich verstehe glaube ich das Problem nicht.
Du kannst doch die beiden Menüs vollkommen unabhängig über ihre Klassen (mod_mmenu und mod_navigation) ansprechen und je nach Viewportgröße entweder die eine oder die andere ausblenden.

Zitat:

---

Zitat von mlweb

Ich verstehe glaube ich das Problem nicht.
Du kannst doch die beiden Menüs vollkommen unabhängig über ihre Klassen (mod_mmenu und mod_navigation) ansprechen und je nach Viewportgröße entweder die eine oder die andere ausblenden.

---

meine mediaqueries

HTML-Code:

---

/* mobil ausblenden*/
@media(min-width:990px) and (max-width:6000px){
#navigation, .mod_mmenu.offcanvas{
display:none;
}
}

/* mobil einblenden*/
@media(min-width:320px) and (max-width:980px){
#navigation, .mod_mmenu.offcanvas, .level_1{
display:block;
}
}


/* hauptnavi ausblenden*/
@media(max-width:979px){
.mod_navigation.block .level_1{
display:none !important;
}
}

/* hauptnavi einblenden*/
@media(min-width:980px) and (max-width:3000px){
.mod_navigation.block .level_1{
display:block !important;
}
}

---

Hallo,

Tipp meinerseits ... schau dich mal im Netz um und eruiere verwendete Bildschirmgrössen und die in diversen Frameworks verwendeten breakpoints in media queries.
min und max dann in deinem CSS entsprechend verwenden.

Was passiert in deinem CSS zwischen 981px und 999px? Oder bei genau 1000px? :D

Zitat:

---

Zitat von derRenner

Hallo,

Tipp meinerseits ... schau dich mal im Netz um und eruiere verwendete Bildschirmgrössen und die in diversen Frameworks verwendeten breakpoints in media queries.
min und max dann in deinem CSS entsprechend verwenden.

Was passiert in deinem CSS zwischen 981px und 999px? Oder bei genau 1000px? :D

---

Danke für den Tip, habs nochmal angepasst. Bei 1000px war nichts zu sehen.