Top-Navigationsleiste passt sich beim kleiner ziehen nicht an

Kickflip · 23. März 2020

Hi,

ich habe folgendes Problem:

Ich würde gerne eine Navigationsbar einpflegen, die sich je nach Größe des Fensters anders verhält. Etwas besonderes für die kleinste Größe bis 768px, was für das Smartphone zutrifft, danach dann etwas mit 959px, weil sich sonst die einzelnen Punkte oben in der Leiste überschneiden und danach dann etwas für eine Desktopansicht.

Das Problem ist, das die Navigationsleiste das ganze so semi macht. Also wenn ich mein Fenster klein habe (bsp. 750px), und in diesem Zustand die Seite neu lade dann zeigt sie den Smartphonemodus an. Alles super. Wenn ich es dann größer ziehe, dann geht sie auch schön ab 769px in den Mittelmodus und ab 960px in den Desktopmodus. Aber da bleibt das Ganze nun. Wenn ich jetzt das Fenster wieder kleiner ziehe, dann springt sie nicht wieder zurück in die anderen Modi. Wenn ich aber die Seite dann kleingezogen habe, und neu lade, dann zeigt sie wieder den Smartphonemodus an. Warum ist das so? Was mache ich falsch? Benutze Safari.

Code

@media screen and (max-width: 959px){
  .NAVLINKS{
    display: flex;
    justify-content: space-around;
    width: 60%;
  }
}


@media screen and (max-width: 768px){
    body{
        overflow-x: hidden;
    }
    
    .NAVLINKS{
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.2s ease-in;
       
    }
    
    .NAVLINKS li{
        opacity: 0; 
    }
    
    .burger{
        display: block;
    }
    
    .nav-active{
        transform: translate(0%);
    }
    
    @keyframes navLinkFade{
        from{
            opacity: 0;
            transform: translateX(50px);
        }
        to{
            opacity: 1;
            transform: translateX(0px);
        }
    }
    
    .toggle .line1{
       transform: rotate(-45deg) translate(-5px, 5px);
    }
    .toggle .line2{
        opacity: 0;
    }
    .toggle .line3{
        transform: rotate(45deg) translate(-5px, -5px);
    }
}

Alles anzeigen

basti1012 · 24. März 2020

Poste mal bitte dein Html dazu damit man das mal selber testen kann, ob und wie das bei uns auch zutrifft.

Fips · 24. März 2020

Zitat von basti1012

Poste mal bitte dein Html dazu damit man das mal selber testen kann, ob und wie das bei uns auch zutrifft.

Css ist schon online!

basti1012 · 24. März 2020

super,mit diesen Crossposting kommst du auch nicht weiter

Kickflip · 26. März 2020

Hi,

das ist die html zu der nav:

Code

<nav>
        <div class="LOGO">
            <a href="link"><h4>bla</h4> </a> 
        </div>
        <ul class="NAVLINKS">
            <li>
                <a href="link"> portfolio</a>
            </li>
            <li>
                <a href="#"> contact</a>
            </li>
            <li>
                <a href="#"> thisisme</a>
            </li>
            <li>
                <a href="#"> instagram</a>
            </li>   
            
            
            <li>
                <a href="#"></a> 
            </li>   
        </ul>  
        <div class="burger">
            <div class="line1"> </div>
            <div class="line2"> </div>
            <div class="line3"> </div>
        </div>
    </nav>

Alles anzeigen

Kickflip · 26. März 2020

das

Code

@keyframes navLinkFade{
        from{
            opacity: 0;
            transform: translateX(50px);
        }
        to{
            opacity: 1;
            transform: translateX(0px);
        }
    }

macht Probleme, wenn ich das auskommentiere funktioniert es

Javascript rufe ich in der HTML auf mit

Code

<script src="TopNavBar.js"> </script>

sieht wie folgt aus:

Code

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.NAVLINKS');
    const navLinks = document.querySelectorAll('.NAVLINKS li');
    
    
    burger.addEventListener('click',()=>{
        //toggle nav
        nav.classList.toggle('nav-active');
        
        
        //animate links
        navLinks.forEach((link, index) => { 
            if (link.style.animation){
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index/5 + 0.2}s`;
            }     
        }); 
        
         //Burger Animation
        burger.classList.toggle('toggle');
        
    });
  
};

navSlide();

Alles anzeigen

Top-Navigationsleiste passt sich beim kleiner ziehen nicht an

Jetzt mitmachen!

Teilen

Tags