如何在标题中创建横幅

我的网站是在WP和我使用Hueman主题。我想在标题的右侧添加baner。现在我使用标题图像，其中最大。宽度和我不知道我是否应该在此标题图像上添加横幅或剪切宽度标题图像并在其旁边添加横幅。如何在标题中创建横幅

我搜索了很多，我发现了一个解决方案： https://wordpress.org/support/topic/ads-11?replies=6#post-4906945

我不知道在哪里我可以把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">

这是我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 {} 
}

的苏玛summarum这面旗帜：

这是我的网站：www.st-mobilny.pl和我想要做这样的事情：1drv.ms/1RoUkIV

来源

2015-11-19 HelicoP

什么是您的网站网址？ – Firefog

横幅是否需要点击？如果没有，您可以将标题添加到标题图形中，如在Photoshop中。 – coopersita

@coopersita是的，我想点击 – HelicoP

最好的办法是与位置绝对添加：

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

在你的CSS：

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

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

更改top和right到任何你想要的。我添加了一个示例媒体查询以显示如何更改它，因此，一旦您进入移动设备，横幅会在徽标上方显示。如果您希望徽标下方的横幅，请将HTML中的div移至菜单上方。

来源

2015-11-20 01:48:37 coopersita

如何在标题中创建横幅

回答

相关问题