在导航中对齐徽标并粘贴标题？

时间：2014-10-13 06:03:32

标签： html css css3 layout navigation

如何垂直对齐徽标旁边的导航？但徽标和导航的响应式设计不会丢失。 My site

像这样：

enter image description here

这是我当前导航的演示

Codepen

徽标CSS 

 #masthead .site-branding{ 
float: left; 
padding: 15px 0;
}
#masthead .site-branding img{
height: auto !important;
width: auto !important;
display: block;
}

2 个答案:

答案 0 :(得分：0)

您发送的图片显示您的导航处于有利位置，并且您的响应大小存在问题。是吗？

jquery的：

$(document).ready(function(){
   window_height = $(window).height();
   if(window_height<500) {   //you should adjust that the function run in an appropriate size of window
       //here you can write that your logo and navigation div doesn't have any float so that each of them place in a line. for example:
       $("#logo").css("float" , "none");
       $("#navigation").css("float" , "none");
   }
});

或者css：

@media screen and (max-width: 800px) {  */ when the size of screen got smaller than 800px*/
    */your css*/
}

并小心将此标记添加到您的头部：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

答案 1 :(得分：-1)

试试这个（编辑你的代码）

<html>
    <head>
        <style type="text/css">
        #masthead #top-header{
            padding: 15px 0;
            border-bottom: 1px solid #E4E4E4;
            background:#FFF;
            transition:padding 0.5s ease;
            -webkit-transition:padding 0.5s ease;
            -moz-transition:padding 0.5s ease;
            /*added*/
            float: left; 
            width: 100%;
            /*added*/
        }
        body.boxed-layout{
            background: #ffffff;  
        }
        .boxed-layout #page{ 
            margin: 0 auto; 
                background: #FFF;
                width:1200px;
                box-shadow: 0 0 12px #999;
        }
        .boxed-layout .ak-container{
            width:1200px;
            padding:0 15px;
        }
        .ak-container{ 
            width:1170px; 
            margin: 0 auto;
        }
        #masthead .site-branding{ 
            float: left; 
            padding: 15px 0;
        }
        #masthead .site-branding img{
            height: auto !important;
            width: auto !important;
            display: block;
        }
        /*#masthead .right-header{
            float: right;
            padding: 10px 0;
        }*/
        #masthead .right-header {
            float: right;
            padding: 15px 0;
            width: 87%;
        }
        #masthead .right-header .clear:first-child{
            margin-top: 25px;
        }
        .header-text{
            font-family: 'Arial', sans-serif;
            color: #000099;
            font-size: 20px;
                text-align: right;
                margin-bottom: 10px;
            text-transform: initial;
        }
        .header-text p{
            margin-bottom: 0;
        }

        /*--------------------------------------------------------------
        Menus
        --------------------------------------------------------------*/
        .main-navigation {
            /*clear: both;*/ /*removed*/
            display: block;
            font-weight: 300;
            font-family: 'Arial', 'sans-serif';
            font-size: 9px;
            position: relative;
            border-bottom: 3px solid #e92121;
            background: #FFFFFF;
        }
        .main-navigation .ak-container{
            padding:0 !important;
        }
        .main-navigation ul {
            list-style: none;
            margin: 0 auto;
            padding: 0;
        }
        .main-navigation li {
            display: inline-block;
            position: relative;
            line-height:48px;
            font-size:18px;
            text-transform: initial;
            color:#ababab;
            text-align: center;
            white-space: nowrap;
        }
        .main-navigation.menu-right{
            text-align: right;
        }
        .main-navigation.menu-center{
            text-align: center;
        }
        .main-navigation.menu-right li{
            margin-left: 25px;
            margin-right:0;
        }
        .main-navigation.menu-center li{
            margin-left: 12px;
            margin-right:12px;
        }
        .main-navigation a {
            display: block;
            text-decoration: none;
            color: #000000;
            padding: 0 18px;
        }
        .main-navigation ul ul {
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
            display: none;
            left: 0;
            position: absolute;
            z-index: 99999;
            background: #FFF;
            top: 100%;
            border-bottom: 3px solid #F80000;
            border-top: 3px solid #F80000;
            transition:all 0.3s ease-in-out;
            -moz-transition:all 0.3s ease-in-out;
            -webkit-transition:all 0.3s ease-in-out;
        }
        .main-navigation ul li.more-menu-item > ul{
            right:0;
            left:auto;
        }
        .main-navigation ul ul ul {
            left: 100%;
            top: 0;
            border-top:none;
        }
        .main-navigation ul ul a {
            min-width: 150px;
                padding: 0;
        }
        .main-navigation ul ul li {
            font-size: 16px;
            line-height: 18px;
            border-bottom: 1px solid #DDD;
            margin: 0 !important;
            padding:10px 15px;
            display: block;
            text-align: left;
            text-transform: none;
        }
        .main-navigation ul ul li:last-child{
            border-bottom: none;
        }
        .main-navigation li:hover > a {
            background: #e92121;
        }
        .main-navigation ul ul li:hover > a ,
        .main-navigation ul ul li.current-menu-item > a {
            color: #e92121;
        }
        .main-navigation ul ul a{
            color: #666;
            background: none !important;
        }
        .main-navigation ul ul a:hover {
        }
        .main-navigation ul li:hover > ul {
            display: block;
        }
        .main-navigation .current-menu-parent > a,
        .main-navigation .current-menu-item > a,
        .main-navigation .current_page_item > a,
        .main-navigation .current_page_parent > a {
            background: #D00000;
        }

        /* Small menu */
        .menu-toggle {
            cursor: pointer;
            display: none;
        }
        .hide{
            display: none;
        }
        .site-main .comment-navigation,
        .site-main .paging-navigation,
        .site-main .post-navigation {
        /*--    margin: 0 0 15px; --*/
            overflow: hidden;
        }
        .site-main .post-navigation{
            margin-top: 40px;
            }
        .ak-search{
            float: right;
            margin-top: 8px;
        }
        </style>
    </head>
<body>
<header id="masthead" class="site-header">
    <div id="top-header" class="original" style="visibility: visible;">
        <div class="ak-container">
            <div class="site-branding">
                <a href="http://66.147.244.92/~homecre1/betasite/" rel="home">
                    <img src="http://66.147.244.92/~homecre1/betasite/wp-content/uploads/2014/10/hcphlogo1.png" alt="">
                </a>
            </div><!-- .site-branding -->

            <div class="right-header clearfix">
                <div class="clearfix"></div>
                <div class="socials">
                    <a href="http://facebook.com" class="facebook" title="Facebook" target="_blank"><span class="font-icon-social-facebook"></span></a>
                    <a href="http://facebook.com" class="twitter" title="Twitter" target="_blank"><span class="font-icon-social-twitter"></span></a>
                    <a href="http://facebook.com" class="linkedin" title="Linkedin" target="_blank"><span class="font-icon-social-linkedin"></span></a>
                </div>

                <nav id="site-navigation" class="main-navigation menu-left">
                    <div class="ak-container">
                        <h1 class="menu-toggle">Menu</h1>
                        <div class="menu-newmenu-container">
                            <ul id="menu-newmenu" class="menu">
                                <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-220"><a href="http://66.147.244.92/~homecre1/betasite/">Home</a></li>
                                <li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="http://66.147.244.92/~homecre1/betasite/about/">About Us</a></li>
                                <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-209"><a href="http://66.147.244.92/~homecre1/betasite/partners/">Partners</a></li>
                                <li id="menu-item-210" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-210"><a href="http://66.147.244.92/~homecre1/betasite/payment/">Payment</a></li>
                                <li id="menu-item-230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-230"><a href="http://66.147.244.92/~homecre1/betasite/loan/">Loan</a></li>
                                <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-207"><a href="http://66.147.244.92/~homecre1/betasite/social-responsibility/">Financial Literacy</a></li>
                                <li id="menu-item-208" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-208"><a href="http://66.147.244.92/~homecre1/betasite/frequently-asked-questions/">FAQ</a></li>
                                <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="http://66.147.244.92/~homecre1/betasite/careers/">Careers</a></li>
                                <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-206"><a href="http://66.147.244.92/~homecre1/betasite/contact-us/">Contact Us</a></li>
                            </ul>
                        </div>          
                    </div>
                </nav><!-- #site-navigation -->

                <div class="ak-search">
                    <form method="get" class="searchform" action="http://66.147.244.92/~homecre1/betasite/" role="search">
                        <input type="text" name="s" value="" class="s" placeholder="Search...">
                        <button type="submit" name="submit" class="searchsubmit"><i class="fa fa-search"></i></button>
                    </form>
                </div>
            </div><!-- .right-header -->
        </div><!-- .ak-container -->
    </div>
</header>
<!-- #masthead -->
</body>
</html>
相关问题
最新问题