微调转换延迟 - CSS

Question

我正在使用左侧导航栏的网站上工作，我需要一些帮助来微调转换延迟。这是网站：http://104.193.173.104/modx/index.php

桌面

• 以内嵌社交图标开始广泛（240像素）
• 点击汉堡缩小（56px宽）和社交图标堆栈

平板

• 开始缩小（56px）并叠加社交图标
• 点击汉堡包打开（240px），社交图标内联

问题是当我从窄切换到宽时，图标首先堆叠，向下撞击下面的导航，然后打开到内联。目标是通过整个更改使较低的导航集保持在相同的垂直位置。我假设我需要使用transition-delay css属性，但我对它不是很熟悉并努力让事情发挥作用。

.mmc表示主菜单折叠，。。是展开。

代码：

＆＃13;

＆＃13;

@media (max-width: 480px) {
      #social-links-container {
        padding: 60px 0;
      }
      ul.social-links {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-decoration: none;
      }
      .social-links li {
        display: inline;
        padding: 0 18px;
      }
      .social-links li a {
        min-width: 80px;
        color: #808b9c;
      }
    }
    
    /* tablet */
    @media (min-width: 480px) {
      #social-links-container {
        padding: 45px 0 20px;
      }
      .mme #social-links-container {
        padding: 60px 0;
      }
      ul.social-links {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-decoration: none;
      }
      .social-links li {
        display: block;
        padding-left: 10px;
        padding-bottom: 15px;
      }
      .mme .social-links li {
        display: inline;
        padding: 0 18px;
      }
      .social-links li a {
        min-width: 80px;
        color: #808b9c;
      }
    }
    
    /* desktop */
    @media (min-width: 992px) {
      #social-links-container {
        padding: 60px 0;
      }
      .mmc #social-links-container {
        padding: 45px 0 20px;
      }
      ul.social-links {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-decoration: none;
      }
      .social-links li {
        display: inline;
        padding: 0 18px;
      }
      .mmc .social-links li {
        display: block;
        padding-left: 10px;
        padding-bottom: 15px;
      }
      .social-links li a {
        min-width: 80px;
        color: #808b9c;
      }
    }

＆＃13;

<div id="main-menu" role="navigation">
    	<div id="main-menu-inner">
    
    	    <!-- LOGOS -->
    	    <div id="logo">
    	        <a href="index.php">
    				<img src="/modx/assets/images/logos/ComoxCaptivates_blue_220.png">
    			</a>
    	    </div>
    
    	    <div id="logo-collapsed" >
    	        <a href="index.php">
    	            <img src="/modx/assets/images/logos/32x32.png">
    	        </a>
    	    </div>
    	    
    	    <!-- SOCIAL MEDIA -->
    	    <div id="social-links-container">
    	        <ul class="social-links">
    	            <li><a target="_blank" href="https://www.facebook.com/TownofComox/"><i class="fa fa-facebook-official fa-2x fa-fw"></i></a></li>
                    <li><a target="_blank" href="https://twitter.com/TownofComox"><i class="fa fa-twitter fa-2x fa-fw"></i></a></li>
                    <li><a href="[[~#]]"><i class="fa fa-calendar fa-2x fa-fw"></i></a></li>
                </ul>
            </div>
    
    	    <!-- LEFT NAVIGATION -->
    	    <ul class="navigation">
    	        <li>
    	            <a href="[[~9]]">
    	                <i class="fa fa-bicycle fa-lg fa-fw" style="margin-right: 8px;"></i>
    	                <span class="mm-text">Recreation</span>
    	            </a>
    	        </li>
    	        <li>
    	            <a href="[[~10]]">
    	                <i class="fa fa-users fa-lg fa-fw" style="margin-right: 8px;"></i>
    	                <span class="mm-text">Employment</span>
    	            </a>
    	        </li>
    	        <li>
    	            <a href="[[~11]]">
    	                <i class="fa fa-map-o fa-lg fa-fw" style="margin-right: 8px;"></i>
    	                <span class="mm-text">Maps</span>
    	            </a>
    	        </li>
    	        <li>
    	            <a href="[[~12]]">
    	                <i class="fa fa-tint fa-lg fa-fw" style="margin-right: 8px;"></i>
                        <span class="mm-text">Water Restrictions</span>
    	            </a>
    	        </li>
    	        <li>
    	            <a href="[[~13]]">
    	                <i class="fa fa-ship fa-lg fa-fw" style="margin-right: 8px;"></i>
                        <span class="mm-text">Tourism</span>
    	            </a>
    	        </li>
    	        <li>
    	            <a href="[[~14]]">
    	                <i class="fa fa-money fa-lg fa-fw" style="margin-right: 8px;"></i>
                        <span class="mm-text">Investment</span>
    	            </a>
    	        </li>
    	    </ul>    	
    	</div>
    </div>

＆＃13;

＆＃13;

＆＃13;