如何在標題中創建橫幅

我的網站是在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

如何在標題中創建橫幅

回答

相關問題