Question

所以我有一个自适应导航，.sidebar-nav div是导航包装，positioned:absolute;所以我可以＆＃34;隐藏＆＃34;它具有left:和right:属性。

问题：由于此div是绝对的，因此父主标题div崩溃。

要求：我希望主标题在移动设备屏幕中显示，背景颜色为白色背景，以便用户可以看到汉堡导航。

不确定我的html结构怎么可能？想法

以下是演示的链接：http://www.radian3.com

的header.php

    <!DOCTYPE html>
<html  <?php language_attributes(); ?>>
<head>
    <title>IPE</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body-wrapper">
<div class="main-outer-header">

    <header class="main-header">
        <div id="sidebar-nav">              
            <div class="logo-nav-one-wrap">
                <nav class="nav-one">
                    <li id="primary-headline" class="logo-icon"><img src="#"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></li>

                    <ul>
                        <?php 

                            $args = array(
                                'theme_location' => 'primary'

                            );
                            wp_nav_menu($args);
                        ?>


                    </ul>


                    </nav>

            </div>

            <nav class="nav-two home-nav">
            <div class="nav-two-wrap">

                <?php       
                    $walker = new Nav_Walker_Nav_Menu;

                    $args = array(
                        'theme_location' => 'secondary',
                        'walker' => $walker

                    );
                    wp_nav_menu($args);
                ?>          
            </div>

            </nav>

            <div id="sidebar-btn">
                <span></span>
                <span></span>
                <span></span>               
            </div>


        </div>


    </header><!--  /HEADER -->
    </div>


<?php wp_head(); ?>

CSS

    .main-outer-header {
        background-color: red;
        height: 300px;
    }


    #nav-desc-show {
        display: block;
        text-align: center;
        position: relative;
        font-weight: normal;
        margin-left: 13px;
    } 

/* HEADER */
.main-header {
    width: 100%;
/*  height: 50px;
*/  background-color: white;
}
/*
    Mobile Sidebar Navbar
*/
#sidebar-nav {
    display: inline-block;
    background-color:#151718;
    width: 200px;
    height: 100%;
    position: absolute;
    left: -200px;
    top:0px;
    z-index: 99;
    transition: left 0.3s linear;

}
/* if sidebar has a class of .visible*/
#sidebar-nav.visible {
    left: 0px;
    transition: left 0.3s linear;
}
#sidebar-btn {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 15px;
    cursor: pointer;
    margin:20px;
    position: absolute;
    top: 0px;
    right: -60px;
}
#sidebar-btn span {
    height: 1px;
    background: #111;
    margin-bottom: 5px;
    display: block;
}
#sidebar-btn span:nth-child(2) {
    width: 75%;
}
#sidebar-btn span:nth-child(3) {
    width: 50%;
}


/* LOGO */
.logo-icon {
    margin-bottom: 1rem;
}
/* NAVIGATION 1*/
.nav-one {
    list-style: none;
}
.nav-one a, .nav-two a {
    color: #fff;
    text-decoration: none;
    padding: 1rem;

}
.nav-one li, .nav-two li {
    background: #1C1E1F;
    padding: 1rem;
}
.menu-items {
/*  border-bottom: 1px solid black;
*/}
.menu-items:last-child {
    border: none;
}

.nav-two-wrap ul {
    list-style: none;
}
/* NAVIGATION 2*/
.nav-two {
    margin-top: 20px;
 }


.nav-desc {
    display: none;

}

Answer 1

请sidebar-btn置于sidebar-nav之外，并在移动视图中提供position:relative代替position:absolute。

<div id="sidebar-btn">
   <span></span>
   <span></span>
   <span></span>               
</div>

自适应导航：移动屏幕中的父级Div崩溃？

1 个答案: