Top menu background full screen 1.6

[karlosman]

Hello, Please advice how to do background color of the top menu across the entire width of the screen? Thank you

[JeredBolton]

You need to edit your theme's CSS.

 

If you proivde a link to your store, it will be possible to be a bit more specific.

[karlosman]

I need to stretch the background color on the whole page. Demonstration in the picture. Thank you

[JeredBolton]

In the default theme, the width of the menu's containing element is constrained by a container and a row.

 

You need to add some code to modules/blocktopmenu/blocktopmenu.tpl in your theme directory to allow the menu and its container to go full width.

 

The following addtional lines in blue will give you an idea of what you need to do:

 

{if $MENU != ''}                                                              
</div>
</div>

<div style="background-color: red">                                           
<div class="container">                                                       
<div class="row">
    <!-- Menu -->                                                             
    <div id="block_top_menu" class="sf-contener clearfix col-lg-12">          
        <div class="cat-title">{l s="Menu" mod="blocktopmenu"}</div>          
        <ul class="sf-menu clearfix menu-content">                            
            {$MENU}                                                           
            {if $MENU_SEARCH}                                                 
                <li class="sf-search noBack" style="float:right">             
                    <form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
                        <p>                                                   
                            <input type="hidden" name="controller" value="search" />
                            <input type="hidden" value="position" name="orderby"/>
                            <input type="hidden" value="desc" name="orderway"/>
                            <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
                        </p>                                                  
                    </form>                                                   
                </li>                                                         
            {/if}                                                             
        </ul>                                                                 
    </div>                                                                    
    <!--/ Menu -->

</div>
</div>
</div>
<div class="container">
<div class="row">  
{/if}

 

You'll need to set the #block_top_menu  top-padding to 0px in css/modules/blocktopmenu/css/blocktopmenu.css (in your theme directory).

Edited February 20, 2017 by JeredBolton (see edit history)

[karlosman]

It works great !!! Thank you