如何在标题中创建横幅

Question

my site is on WP and I using Hueman theme. 我的网站位于WP上，我使用的是Hueman主题。 I want to add baner in right side of header. 我想在标题的右侧添加横幅。 Now Im using header image, which have max. 现在我正在使用标题图片，最大 width and I dont know if I should add my banner on this header image or cut width header image and add banner next to it. 宽度，我不知道是否应该在此标题图像上添加横幅或剪切宽度标题图像并在其旁边添加横幅。

I searched a lot and I found a solution: https://wordpress.org/support/topic/ads-11?replies=6#post-4906945 我进行了很多搜索，找到了解决方案： https : //wordpress.org/support/topic/ads-11?replies=6#post-4906945

I have no idea where I can put divs with my banner, this is how looks header.php 我不知道我可以在哪里放置div和横幅，这就是header.php的外观

<!DOCTYPE html> 
<html class="no-js" <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(''); ?></title>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header id="header">
        <?php if ( has_nav_menu('topbar') ): ?>
            <nav class="nav-container group" id="nav-topbar">
                <div class="nav-toggle"><i class="fa fa-bars"></i></div>
                <div class="nav-text"><!-- put your mobile menu text here --></div>
                <div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
                <div class="container">
                    <div class="container-inner">       
                        <div class="toggle-search"><i class="fa fa-search"></i></div>
                        <div class="search-expand">
                            <div class="search-expand-inner">
                                <?php get_search_form(); ?>
                            </div>
                        </div>
                    </div><!--/.container-inner-->
                </div><!--/.container-->
            </nav><!--/#nav-topbar-->
        <?php endif; ?>
        <div class="container group">
            <div class="container-inner">
                <?php if (ot_get_option('header-image') == ''): ?>
                <div class="group pad">
                    <?php echo alx_site_title(); ?>
                    <?php if (ot_get_option('site-description') != 'off'): ?><p class="site-description"><?php bloginfo('description'); ?></p><?php endif; ?>
                </div>
                <?php endif; ?>
                <?php if (ot_get_option('header-image')): ?>
                    <a href="<?php echo home_url('/'); ?>" rel="home">
                        <img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
                    </a>
                <?php endif; ?>
                <?php if (has_nav_menu('header')): ?>
                    <nav class="nav-container group" id="nav-header">
                        <div class="nav-toggle"><i class="fa fa-bars"></i></div>
                        <div class="nav-text"><!-- put your mobile menu text here --></div>
                        <div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
                    </nav><!--/#nav-header-->
                <?php endif; ?>
            </div><!--/.container-inner-->
        </div><!--/.container-->
    </header><!--/#header-->
    <div class="container" id="page">
        <div class="container-inner">           
            <div class="main">
                <div class="main-inner group">

And this is my custom.css edited by me to hide this banner from mobile users 这是我编辑的custom.css，以向移动用户隐藏此横幅

/* 
Add your custom styles in this file instead of style.css so it 
is easier to update the theme. Simply copy an existing style 
from style.css to this file, and modify it to your liking. 

When you update your theme, backup this file and re-add it after.
*/

/* Global */
.mystyle {}

.ads-header-desktop {
    display: block;
    float: right;
    margin-right: 5px;
    margin-top: -95px;
}

/* hide or display */
.ads-header-desktop { display: block; }

@media only screen and (max-width: 800px) {
.ads-header-desktop { display: none; }
}

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
    .mystyle {}
}


/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
    .mystyle {}
}


/* Mobile - 320px */
@media only screen and (max-width: 479px) {
    .mystyle {}
}

Summa summarum: 摘要：

This is my site: www.st-mobilny.pl and I want to do something like that: 1drv.ms/1RoUkIV 这是我的网站：www.st-mobilny.pl，我想要做类似的事情：1drv.ms/1RoUkIV

Answer 1

Your best bet is to add it with position absolute: 最好的选择是添加绝对位置：

<div class="container-inner">
            <div class="banner"><a href=""><img src="path/to/image" alt=""></a></div>
            <?php if (ot_get_option('header-image') == ''): ?>

In your CSS: 在您的CSS中：

.container-inner {
      position: relative;
 }
.banner {
    position: absolute;
    top: 50px;
    right: 0px;
    z-index: 100;
}

@media screen and (max-width: 768px) { .banner { position: static;} }

Change the top and right to whatever you want. 将top和right更改为所需的任何内容。 I added a sample media query to show how you could change it, so once you go into mobile, the banner goes above the logo. 我添加了一个示例媒体查询来显示如何进行更改，因此一旦进入移动设备，横幅将位于徽标上方。 If you want the banner below the logo, move the div in the html to above the menu. 如果要将横幅广告放在徽标下方，请将html中的div移动到菜单上方。

如何在标题中创建横幅

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-20 01:48:37

如何在标题中创建横幅

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-20 01:48:37

解决方案1
0 已采纳 2015-11-20 01:48:37