0
У меня проблема с моим Navbar и логотипом. Я изменил Navbar, что он находится в фиксированном положении сверху со 100% шириной. Я положил функцию логотипа также из div страницы, чтобы она была выше страницы в области заголовка.Wordpress TwentyTwelve Navbar and Logo BUG
Проблема заключается в том, что, когда я устанавливаю край маркера nav-bar на 0, логотип находится под навигационной панелью. Когда я устанавливаю margin-top для логотипов примерно до 5 утра, он помещает навигационную панель туда, где начинается логотип.
Вот мои коды для лучшего понимания:
header.php
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e('Menu', 'twentytwelve'); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e('Skip to content', 'twentytwelve'); ?>"><?php _e('Skip to content', 'twentytwelve'); ?></a>
<?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?>
</nav><!-- #site-navigation -->
</div>
<div id="mainlogo" class="mainlogo">
<?php if (get_header_image()) : ?>
<a href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
</div id="mainlogo" class="mainlogo">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="slider" class="slider">
<?php layerslider(1) ?>
</div>
</header><!-- #masthead -->
<div id="main" class="wrapper">
style.css
.header-image {
display: block;
margin-top: 0rem;
margin-left: auto;
margin-right: auto;
}
/* Navigation Menu */
.main-navigation {
margin-top: 0p;
margin-top: 0rem;
position: fixed;
z-index: 999;
opacity:1;
filter:alpha(opacity=100);
width: 100%;
margin-top: 0px;
margin-top: 0rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 28px;
font-size: 1rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #FFF;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
margin-left: 3rem;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
/* Menu Background */
.nav-menu {
background-image: url("img/menu_repeat.png");
padding-left: 0rem;
padding-right: 0rem;
}
.slider {
margin-top: 15px;
margin-top: 1rem;
}
.mainlogo {
margin-top: 50px;
margin-top: 5rem;
}
.navbar {
margin-top: 0px;
margin-top: 0rem;
}
Было бы проще, если бы мы могли видеть сайт, потому что сам по себе этот код ничего не значит: \ –
ITs на моей локальной машине. Вы хотите, чтобы я загружал файлы темы здесь? –
Нет, я думал, что у вас есть он где-то в Интернете. Трудно понять проблему с частью кода. Ваш nav установлен как 'position: fixed ', см., Если это вызывает некоторые проблемы. –