Navbar content moving around when resizing

#1

i have an issue with my navbar, when i resize it to a smaller resolution, it starts to move around, i just want it to get smaller but staying still:
click the links to see the code and pictures

how normally looks
how looks when resized

code1

code2

code3

#2

Hi loretsav, welcome to the forums! :slightly_smiling_face:

Your description of the problem is easy to undertsand, but if you want help to solv the broblem in your code we need to see both the HTML and the CSS.

I’m afraid screen captures is not what we think of when we want you to post relevant code or link to a page displaying the issue. :wink:

I believe this is quit simple to fix, and it looks like you’ve made a stand alone demo to show the problem.

If you can’t temporary put it up live to check out. Could you please post the complete page code here, i.e. all the code? :slight_smile:

2 Likes
#3 
<nav>
        <ul>
                <li class="topnav-left"><a href="#home"><img src="Img/Emg.png" alt="Logo" width="100" height="100"></a></li>
                <li class="name"><a href="#home"><h1>Magnificent<span class="h2r"> Gaming</span></h1></a></li> 
        </ul>
        <ul class="topnav" id="dropdownclick">
            <li class="center"><a href="#home"><b>Home</b></a></li>
            <li class="center"><a href="#teams"><b>Teams</b></a></li>
            <li class="center"><a href="#sponsors"><b>Sponsors</b></a></li>
            <li class="center"><a href="#contact"><b>Contact</b></a></li>
            <li class="triline"><a href="javascript:void(0);" onclick="dropdownmenu()">&#9776;</a></li>
        </ul>
    </nav>
    <div class="container">
            

    </div>
    
    <script>
    function dropdownmenu() {
        var x = document.getElementById("dropdownclick");
        if (x.className === "topnav") {
            x.className += " responsive";
            /*change topnav to topnav.responsive*/ 
        } else{
            x.className = "topnav";
        }
    }
    </script>

    
    nav {
        width: 100%;
        margin: 0;
    }
    
    li.topnav-left{
    margin-left: 10px;
    float: left;
    list-style: none;
    padding-top: 40px;
    }
    
    nav ul.topnav {
        overflow: hidden;
        margin: 0;
        padding-right: 50px;
        float: right;
    }
    
    ul.topnav li {
        list-style: none;
        float: left;
        padding-top: 37.2px;
    }
    
    li.topnav-left {
        padding-top: 5px;
        padding-left: 30px;
        position: relative;
        float: left;
    }
    
    ul.topnav li a{
        display: block;
        text-decoration: none;
        font-weight: lighter;
        font-size: 19px;
        padding: 14px;
        text-transform: uppercase;
        color: white;
        text-align: center;
       }
    
       .center::after{
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #fff;
        transition: width .3s;
       }
    
       .center:hover::after{
        width: 100%;
        transition: width .3s;
       }
    
    li.name a{
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 15px;
        color: rgb(255, 255, 255);
        float: left;
        padding-top: 32px;
        margin-left: 20px;
    }
    
    .h2r{
        color: black;
        text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    }
    
    li.name{
        list-style: none;
    }
    
    ul.topnav li.triline {
        display: none;
    }
    
    
    @media screen and (max-width: 995px) {
        ul.topnav li  {
    display: none;
         } 
    
         ul.topnav li.triline { 
             display: block; 
             float: right; 
             top: 40px;
             right: 50px;
         } 
    
         ul.topnav.responsive li.triline {
             position: absolute;
             top:0;
             right: 58px;
         }
    
     ul.topnav.responsive { 
         position: relative; 
         float: right;
         padding-top: 75px;
       } 
    
         ul.topnav.responsive li { 
          display: inline; 
          float: none; 
         } 
    
         ul.topnav.responsive li a{ 
             display: block; 
            text-align: right;   
         }
    }