Как выровнять навигацию рядом с логотипом по вертикали? Но отзывчивый дизайн логотипа и навигатора не проиграет. My siteСовместите логотип рядом с навигацией и наклейте заголовок?
Как это:
Вот демо моей текущей нав
CSS логотипа
#masthead .site-branding{
float: left;
padding: 15px 0;
}
#masthead .site-branding img{
height: auto !important;
width: auto !important;
display: block;
}
попробовать это (отредактированный код)
<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>
изображение, которое вы отправили, показывает, что ваша навигация находится в хорошем положении, и у вас возникли проблемы с отзывчивым размером. да?
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">
да, но мне нужно исправить его css hmm – User014019
aha. Это можно сделать css3. Я отредактирую код. Смотрите еще раз. – IVIajid
Это сработало для вас? – IVIajid
ничего не происходит, когда я использую свой код – User014019
Пожалуйста, напишите, где вы редактируете код. – MindlessRanger
опубликовать весь код в html-файле и открыть в браузере. –