Navigationsbar weisser Rand

Shopware 5 Themes & Design
1

Hallo,

ich habe ein Problem mit meiner Navigation. Mein Ziel ist es die Hintergrundfarbe des Headers zu ändern, nur hat meine Navigation oben und unten dicke weisse Ränder, die ich nicht weg bekomme.

Ich habe die Navigation standardmäßig über 

< nav class=“navigation-main” >

eingebunden. Darin befindet sich dann ein neuer Container, in dem meine main-navigation.tpl eingebunden wird.

Kann mir jemand weiterhelfen?

2

Da musst du schon genauer werden. Wie ist die Struktur? Hast du vom Responsive Theme abgeleitet? CSS für den header?

3

@ChrisWe schrieb:

Da musst du schon genauer werden. Wie ist die Struktur? Hast du vom Responsive Theme abgeleitet? CSS für den header?

Hier ist der Code aus dem tpl

 {\* Shop header \*} {block name='frontend\_index\_navigation'} <header class="header-main">
        {block name='frontend_index_top_bar_container'}
            {include file="frontend/index/topbar-navigation.tpl"}
        {/block}


        {block name='frontend_index_header_navigation'}
            <div class="container header--navigation">

            {* Logo container *}
            {block name='frontend_index_logo_container'}
                {include file="frontend/index/logo-container.tpl"}
            {/block}

            {* Shop navigation *}
            {block name='frontend_index_shop_navigation'}
                {include file="frontend/index/shop-navigation.tpl"}
            {/block}

            {block name='frontend_index_container_ajax_cart'}
                <div class="container--ajax-cart" data-collapse-cart="true" data-displaymode="offcanvas"></div>
            {/block}
            </div>
        {/block}
        {* WENN ICH MICH NICHT IRRE, GEHT ES UM FOLGENDEN BLOG: *}
        {block name='frontend_index_navigation_categories_top'}
            <nav class="navigation-main">
                <div class="container" data-menu-scroller="true" data-listselector=".navigation--list.container" data-viewportselector=".navigation--list-wrapper">
                    {block name="frontend_index_navigation_categories_top_include"}
                        {include file='frontend/index/main-navigation.tpl'}
                    {/block}
                </div>
            </nav>
        {/block}
    </header> {/block}

 Hier der Code des inkludierten Files frontend/index/main-navigation.tpl

 {block name='frontend\_index\_navigation\_categories'} 
 {block name='frontend\_index\_navigation\_categories\_navigation\_list'} 
 {strip} {block name='frontend\_index\_navigation\_categories\_top\_home'} - {block name='frontend\_index\_navigation\_categories\_top\_link\_home'} [{s name='IndexLinkHome' namespace="frontend/index/categories\_top"}{/s}]({url controller='index'} "{s name='IndexLinkHome' namespace=") {/block} 
 {/block} {block name='frontend\_index\_navigation\_categories\_top\_before'}{/block} {foreach $sMainCategories as $sCategory} {block name='frontend\_index\_navigation\_categories\_top\_entry'} {if !$sCategory.hideTop} - {block name='frontend\_index\_navigation\_categories\_top\_link'} [{$sCategory.description}]({$sCategory.link} "{$sCategory.description}") {/block} 
 {/if} {/block} {/foreach} {block name='frontend\_index\_navigation\_categories\_top\_after'}{/block} {/strip} {/block} 
 {/block}

Hier ist die css

 .navigation-main { background: #fff; display: none; } @media screen and (min-width: @tabletViewportWidth) { .navigation-main { border-bottom: 1px solid @brand-primary; display: block; position: relative; .navigation--list { .clearfix(); .unitize-padding(0, 10); margin: 0; position: relative; white-space: nowrap; } .navigation--entry { display: inline-block; -ms-touch-action: none; } .navigation--link { .transition(none); .unitize-padding(8, 14); .unitize(font-size, 16); .border-radius-multi(3px, 3px, 0, 0); margin: 0; display: block; cursor: pointer; color: #fff; &:hover { color: @brand-primary; } } .is--active .navigation--link { .primary-gradient(); font-weight: @font-bold-weight; color: #fff; &:hover { color: #fff; } } } } @media screen and (min-width: @desktopViewportWidth) { .navigation-main { .navigation--list { padding: 0; } } }