【问题标题】:Wordpress Navigation: Logo right, navigation leftWordpress 导航:徽标右,导航左
【发布时间】:2016-04-06 19:11:37
【问题描述】:

我有这个website 使用 Wordpress 和基于 Bootstrap 的模板构建的。这个模板顶部有一个导航,我需要的是“反转”品牌(徽标)和导航。基本上我需要将徽标向右浮动,导航向左浮动。

我尝试通过 CSS 但不起作用。

有什么建议吗?

感谢您的建议

编辑:导航代码

<div class="navigation" role="banner">
<div class="secondary-navigation">
<div class="container">
<div class="contact">
</div>
<div class="user-area">
<div class="actions">
</div>

</div>


</div>
</div>  

<div class="container">
<header class="navbar" id="top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nav" href="http://w-liestal.nowcommu.myhostpoint.ch/" title="Un nuovo sito targato WordPress" rel="home"><h1 class="site-title">W-Liestal</h1><h2 class="site-description">Un nuovo sito targato WordPress</h2></a>
</div>
<nav class="primary-navigation collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation" aria-label="Primary Navigation">
<ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item"><a href="http://w-liestal.nowcommu.myhostpoint.ch/">Home</a></li>
<li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://#">Architektur</a></li>
<li id="menu-item-60" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://#">Ausstattung</a></li>
<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://w-liestal.nowcommu.myhostpoint.ch/wohnen/">Wohnen</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://w-liestal.nowcommu.myhostpoint.ch/lage/">Lage</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://w-liestal.nowcommu.myhostpoint.ch/kontakt/">Kontakt</a></li>
</ul>       
</nav>  
</header><!-- /.navbar -->
</div><!-- /.container -->
</div><!-- /.navigation -->
<!-- end Navigation -->

【问题讨论】:

  • 能否包含导航和徽标的代码 sn-p?
  • @scemufessa,你需要排队脚本

标签: wordpress twitter-bootstrap


【解决方案1】:

案例 1:

这是你可以做的:

1 - 将 CSS 代码放在一个单独的文件 (mystyle.css) 中并将其保存在您的主题目录中。

2 - 将以下代码放入你的函数 php:

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

案例 2: 你的css版本问题,

安装插件wpquerystringmodifier增加版本。 (简单的方法)

否则,查找functions.php文件和搜索样式。

 wp_enqueue_style( 'style-name', get_stylesheet_uri(),null,1.1.1,true );

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-10-22
    • 2016-05-11
    • 2023-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-10
    • 1970-01-01
    相关资源
    最近更新 更多