正文 

当前位置： 首页 > 源码 >

Wordpress：自定义徽标和菜单/侧边栏切换的问题

     2023-03-06     266

关键词：

【中文标题】Wordpress：自定义徽标和菜单/侧边栏切换的问题【英文标题】：Wordpress: Problems with custom-logo & menu/sidebar-toggle 【发布时间】：2015-09-05 06:24:09 【问题描述】：

我是 Wordpress 的新手，并且在我的新博客中使用了 Skilt 主题。现在我遇到了自定义徽标和侧边栏切换的问题。

无标志： Click

带徽标： Click

如您所见：上传自定义徽标时，侧边栏切换会向下移动。将整个菜单放在与上传徽标之前相同的位置会很好。希望你能找到解决方法。

CSS：

.site-header 
 position: relative;
 z-index: 100;
 padding: 30px 0;
 padding:  3rem 0;
 

.site-header a 
 color: inherit;
 

 .site-title   
  line-height: 1;
  margin: 0;
  

 .site-description 
  margin: 0;
  

  @media screen and (min-width: 480px) 
  .site-title,
  .site-description 
   display: inline-block;
   vertical-align: middle;
   

  .custom-logo 
   display: inline-block !important;
   vertical-align: middle;
   

  .site-description 
   margin: 0 0 0 10px;
   
  

 .site-branding 
  float: left;
  

 .site-navigation-toggle 
  color: #252931;
  right: 0;
  line-height: 1;
  z-index: 9000;
  font-size: 30px;
  font-size: 3rem;
  -moz-transition: opacity 150ms;
  -o-transition: opacity 150ms;
  -webkit-transition: opacity 150ms;
  transition: opacity 150ms;
  

  .site-navigation-toggle .fa-bars 
   position: relative;
   top: -3px;
   max-height: 25px;
   display: inline-block;
   overflow: hidden;
  

   .custom-logo 
   display: block;
   max-width: 100%;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   

  .custom-logo a 
   display: block;
   width: 100%;
   height: 0;
   font: 0/0 a;
   text-decoration: none;
   text-shadow: none;
   color: transparent;
   

  .site-main 
   display: block;
   
  .single .site-main, .page .site-main 
   background-color: #fff;
   padding: 30px;
   padding: 3rem;
   

 .has-background .site-header,
 .has-background .site-footer,
 .has-background .social-links,
 .has-background .paging-navigation,
 .has-background .site-title 
  color: #fff;

和标头代码：

        <div class="site-branding">
            <?php if ( stag_get_logo()->has_logo() ) : ?>
                <div class="custom-logo">
                <a rel="home" title="<?php esc_attr_e( 'Home', 'stag' ); ?>" href="<?php echo esc_url( home_url('/') ); ?>"></a>
                </div>
            <?php else: ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url() ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <?php endif; ?>

            <?php $is_hiding = stag_theme_mod( 'title_tagline', 'hide-tagline' );  ?>
            <p class="site-description"<?php if ( $is_hiding ) echo ' hidden'; ?>><?php bloginfo( 'description' ); ?></p>
        </div>

        <?php stag_maybe_show_primary_menu( 'header' ); ?>

        <a href="#" id="site-navigation-toggle" class="site-navigation-toggle"><i class="fa fa-bars"></i></a>

    </header

【问题讨论】：

能否请您提供网站链接，因为此代码（缺少标题标签）我们无能为力.. 抱歉，不能发布超过两个链接，这里是site。 请检查我的答案，如果有任何问题，请告诉我.. 【参考方案1】：

我浏览了您的网站，目前为您找到了最简单的解决方案。

请从你的班级中删除这个*** css 这个班级 .site-navigation-toggle, .menu-header 的意思是：

.site-navigation-toggle, .menu-header  position:absolute;top:50%;transform: translateY(-50%);

应该是这样的

.site-navigation-toggle, .menu-header  position:absolute;transform: translateY(-50%);

刚刚删除 top:50% 一切都会好起来的..

【讨论】：

但是你必须小心网站的响应能力......试图给你更好的结果...... 是的，它正在工作。为什么我自己没有想到呢？谢谢！ 请为答案投票并将其标记为答案，以便其他人可以从中获得帮助..谢谢..

Wordpress 自定义演示侧边栏未出现在帖子上

】Wordpress自定义演示侧边栏未出现在帖子上【英文标题】：Wordpresscustomdemosidebarnotappearingonposts【发布时间】：2020-11-1113:30:04【问题描述】：以下php文件获取自定义演示侧边栏以显示在管理小部件菜单中，但不显示在实际帖子中（... 查看详情

给wordpress后台侧栏菜单添加自定义字段的方法

我们在使用wordpress做网站的时候，难免有一些需要在后台设置侧栏菜单下添加自定义字段的情况。下面就简单说说一下，如何在后台设置侧栏菜单下添加自定义字段?在这里我们主要是使用wordpress的add_action()，下面通过自己的代... 查看详情

如何使用#react-admin 创建一个自定义页面，而没有像登录页面这样的菜单侧边栏？

】如何使用#react-admin创建一个自定义页面，而没有像登录页面这样的菜单侧边栏？【英文标题】：HowcanIcreateacustompagewith#react-adminwithoutthemenusidebarlikeloginpage?【发布时间】：2018-12-1811:04:10【问题描述】：我之前使用的是react-adminadmi... 查看详情

如何在wordpress类别侧边栏菜单中显示活动子菜单

】如何在wordpress类别侧边栏菜单中显示活动子菜单【英文标题】：howtodisplayactivesubmenuinwordpresscategorysidebarmenu【发布时间】：2020-03-2017:03:08【问题描述】：我想在类别侧边栏菜单处于活动/打开状态时显示一个子菜单。我尝试使用... 查看详情

带有自定义标签菜单的底部标签栏

】带有自定义标签菜单的底部标签栏【英文标题】：BottomTabbedBarWithCustomisedTabMenu【发布时间】：2019-05-2116:21:58【问题描述】：我正在尝试在选项卡栏菜单的中间获取我的应用程序徽标的圆形图标，我有5个选项卡菜单，我希望第... 查看详情

从Angular 4中的其他组件切换侧边栏菜单

】从Angular4中的其他组件切换侧边栏菜单【英文标题】：ToggleSideBarMenufromothercomponentinAngular4【发布时间】：2018-02-2221:37:08【问题描述】：如何在我的Angular应用中实现侧边栏切换菜单。我对如何在另一个组件中调用侧边栏菜单感到... 查看详情

在代号一上使用自定义表单作为汉堡侧边菜单

】在代号一上使用自定义表单作为汉堡侧边菜单【英文标题】：UsingaCustomFormasHamburgerSideMenuonCodenameOne【发布时间】：2015-06-0211:09:03【问题描述】：我看过关于如何使用命令创建CodenameOne汉堡侧边菜单的CodenameOne视频。我一直在尝... 查看详情

phpwordpress-自定义wordpress登录页面的徽标(代码片段)

查看详情

php自定义wordpress登录页面的徽标(代码片段)

查看详情

php自定义wordpress登录页面的徽标(代码片段)

查看详情

使用自定义帖子类型时更改侧边栏的一侧（左/右）

...ngused【发布时间】：2014-02-2714:41:33【问题描述】：在我的Wordpress网站上，我的archive.php在右侧有一个侧边栏。我正在使用WP下载管理器插件，并且该插件中的类别也使用了我的主题中的archive.php模板文件。但是在这些类别页 查看详情

居中对齐标题菜单：Wordpress（Avada 主题）自定义 CSS

】居中对齐标题菜单：Wordpress（Avada主题）自定义CSS【英文标题】：AlignHeaderMenuinthecenter:Wordpress(AvadaTheme)CustomCSS【发布时间】：2016-12-2606:08:39【问题描述】：在我的网站(www.eibenhof.at)上，我希望顶部的标题菜单位于中间，目前它... 查看详情

Wordpress 导航栏中的自定义简码

】Wordpress导航栏中的自定义简码【英文标题】：CustomshortcodeinWordpressNavBar【发布时间】：2017-01-2911:14:24【问题描述】：我只想在我的wordpress主题菜单栏中添加一个简码按钮来处理bootstrapmodalview函数。我尝试了“ShortcodesinMenus”插... 查看详情

猫头鹰日期选择器正在倾斜侧边栏菜单

...，则侧边栏菜单和应用程序标题会被向上推。没有使用自定义css，全部开箱即用。任何建议将不 查看详情

php自定义徽标wordpress登录(代码片段)

查看详情

php自定义徽标wordpress登录(代码片段)

查看详情

php过滤wordpress自定义徽标(代码片段)

查看详情

php检索自定义徽标wordpress(代码片段)

查看详情