Question

我的网站是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 {}
}

Summa summarum：

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

Answer 1

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

<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移动到菜单上方。

如何在标题中创建横幅

1 个答案: