SharePoint 2013 CSS - 移动全局导航元素

Question

我希望能够将全球导航栏移动到＆＃34;套件栏上方或下方＆＃34;在SP 2013中。

以下是一个示例：

我知道我可以在母版页中添加div，但是，我想使用CSS。我会使用#DeltaTopNavigation还是ms-breadcrumb-top？我会使用什么CSS属性？

Answer 1

#DeltaTopNavigation
{
// you can move with "margin-top:**px;" 

}

我提取此表单 - ＆gt; http://sharepoint.rackspace.com/branding-top-navigation-in-sharepoint-2013

<div class="ms-breadcrumb-top"> - this div is the outer wrapping div that spans the width of the navigation area in the OOTB seattle.master. In a custom branding scenario, you probably will use your own wrapping div instead of this one.

    <div class="ms-core-navigation"> - This tag is the wrapping div of the top navigation link area. Not much going on here for styling purposes.

    <div class= "ms-core-listMenu-horizontalBox" > - Second wrapping div sets the display of the nav to render inline-block. 

    <ul class="root ms-core-listMenu-root static"> - top level of the list. The "root" class provides an easy way to identify the root of your navigation and apply any nedessary styles, while the "static" class is applied to any element of the navigation that doesn't dynamically appear (e.g., dropdown navigation).  The .ms-core-listMenu-root class sets the margin to zero.

    <li class="static"> - an item in the navigation list. Again the "static" tag is applied to the top level navigation items because they are static and don't dynamically appear/disappear based on interaction. 

    <a class="static menu-item"> - the "menu-item" class denotes that this is one of the actual links in the navigation. Styles that affect the actual link are generally applied at this level of the navigation structure.

    <span class="additional-background"> - this span gives you an extra layer to apply additional styling if necessary.

    <span class="menu-item-text"> - the span that holds the actual text. Generally, you probably won't need to do much with this, as most styles for the navigation links actually take place on the "menu-item" class applied at the <a> tag level.

Answer 2

我这样做是为了移动设计师栏，为导航提供空间

#ms-designer-ribbon{
    margin-top:20px;
}

一定要取消隐藏s4-titlerow。如果不这样做，导航将在您使用功能区时消失。

#s4-titlerow {
    display: inline!important;
}