css 三个标题，只有Dynamik徽标和标题右侧区域

Posted 2021-05-13

/* Triple Header */
.site-header .title-area,
.header-image .site-header .wrap .title-area {
    box-sizing: border-box;
    float: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;

}

.header-image .site-header .wrap .title-area, .site-header .title-area {
    background-position: center top;


}

.site-header {
	margin-top:20px; position: relative;
	/*background-color: rgba(170, 56, 77, 1);
	border-bottom: 3px solid #D17383;*/
}

.title-area {
	min-height:90px;
}

.site-header .genesis-nav-menu {
    text-align: center;
    width: auto;
}
.site-header .wrap {
    position: relative;
	overflow:visible;
}
.header-right, .header-left {
	color:#fff;
	font-size:1.4rem;
}
/* ======= Tablet Portrait Cascading @media query (4th) ======*/
@media only screen and (max-width:839px) { 
.header-left, .header-right {
	background: none;
	padding: 0 20px!important;
	color:#AA384D;
	text-align:center;
}
.header-left {
	padding: 50px 20px 0!important;
}
.header-right {
	padding: 0 20px 20px!important;
}
}

/* ======= Large screens media query ======*/
@media only screen and (min-width: 840px) {
 .nav-primary    {
     margin: 40px auto 0;
    }
 
	.site-header .title-area,
    .header-image .site-header .wrap .title-area,
    .site-header .header-widget-area,
	.header-image .site-title, .header-image .site-title a, .header-image .site-title a:visited {
        width: 100%;
		max-width:100%;
    }
	
.site-header .wrap, .content-sidebar .site-header .wrap{
	width:100%;max-width:2000px;
}
.header-left, .header-right {
	position:absolute;
	display:block;
	width: 27%;
}
.header-left {
	padding-top: 5px;
	top:10px;
	left:0;
}
.header-right {
	padding-top: 5px;
	top:10px;
	right:0;
}	
.header-left, .header-right {
	background: #AA384D;
	padding: 10px 20px!important;
	min-height: 50px;
}
	
.header-left {text-align: right!important;}
.header-right {text-align: left!important;}

}

@media only screen and (min-width: 1140px) {

.header-left, .header-right {
	position:absolute;
	display:block;
	width: 32%;
}

}