In this article we will explain how to adjust the markup of your Responsive menu so that it extends the entire width of your page for any menu created with Responsive CSS Menu Builder. With just a few simple tweaks,  you will be up and running in no time! 

After pasting in your markup from Menu Builder, here is an example of how the menu will appear on your page.  Note how the blue color in the navigation stops right with the menu buttons.  To make the blue extend all the way left and right of the menu, we need to simply wrap the menu inside of a <div> tag and apply a style to it.
 

Step: 1

Open the page that you inserted the menu into and add a <div> above the Menu Builder HTML block of code. Here is an example of before and after: 

Before:
<body>
<!-- Start of the body content for CoffeeCup Menu Builder -->
<div id="menuBuilderContainer">
  <div id="menuBuilder">
    <button class="nav-button button bar"><i class="icon_menu_handle"></i><span class="text_menu_link">MENU</span></button>
    <div id="nav" class="nav">
      <ul id="mainmenu" class="nav-collapse">
        <li id="menu_1" class="menu_1 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">HOME</span> </a></li>
        <li id="menu_2" class="has-flyout menu_2 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">SERVICES</span> </a>
          <ul class="flyout submenu_menu_2 submenus" id="submenu_menu_2" style="display: none;">
            <li id="menu_2_sub_0" class="menu_2_sub_0 submenu_items submenu_menu_2_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">SERVICE 1</span> </a> </li>
            <li id="menu_2_sub_1" class="menu_2_sub_1 submenu_items submenu_menu_2_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">SERVICE 2</span> </a> </li>
          </ul>
        </li>
        <li id="menu_3" class="menu_3 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">ABOUT</span> </a></li>
        <li id="menu_4" class="has-flyout menu_4 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">CONTACT</span> </a>
          <ul class="flyout submenu_menu_4 submenus" id="submenu_menu_4" style="display: none;">
            <li id="menu_4_sub_0" class="menu_4_sub_0 submenu_items submenu_menu_4_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">STUFF</span> </a> </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- End of the body content for CoffeeCup Menu Builder --> 
After:
<body>
<div id="menubackground"> </div>
<!-- Start of the body content for CoffeeCup Menu Builder -->
<div id="menuBuilderContainer">
  <div id="menuBuilder">
    <button class="nav-button button bar"><i class="icon_menu_handle"></i><span class="text_menu_link">MENU</span></button>
    <div id="nav" class="nav">
      <ul id="mainmenu" class="nav-collapse">
        <li id="menu_1" class="menu_1 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">HOME</span> </a></li>
        <li id="menu_2" class="has-flyout menu_2 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">SERVICES</span> </a>
          <ul class="flyout submenu_menu_2 submenus" id="submenu_menu_2" style="display: none;">
            <li id="menu_2_sub_0" class="menu_2_sub_0 submenu_items submenu_menu_2_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">SERVICE 1</span> </a> </li>
            <li id="menu_2_sub_1" class="menu_2_sub_1 submenu_items submenu_menu_2_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">SERVICE 2</span> </a> </li>
          </ul>
        </li>
        <li id="menu_3" class="menu_3 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">ABOUT</span> </a></li>
        <li id="menu_4" class="has-flyout menu_4 menu_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">CONTACT</span> </a>
          <ul class="flyout submenu_menu_4 submenus" id="submenu_menu_4" style="display: none;">
            <li id="menu_4_sub_0" class="menu_4_sub_0 submenu_items submenu_menu_4_items"> <a href="http://hotsync.net/center-test/index4.html#"> <span class="icon_menu_handle"></span> <span class="text_menu_link">STUFF</span> </a> </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- End of the body content for CoffeeCup Menu Builder --> 
 
 

Step: 2

Next we need to style that <div> and apply a color to it which is the same as the background color of your menu by inserting the following code in your external style sheet or in the <head> section.

<style>
#menubackground {
background: #21E8A3;
width:100%;
height:50px;
position:absolute;
top:65px;
left:0;
z-index:0;
 
}
#menuBuilderContainer { z-index:5; position:relative}
</style>

 

Note: For this example, our menu background color is #21E8A3 so we need to adjust background: to  #21E8A3 as well.  You will also need to adjust the Top (which changes the pixel position of the <div> from the top of your website), Left (which changes the pixel position of the <div> from the left of your website) and Height (which changes the length of the color in the <div> background) settings to fit the needs of your website. 


Here is what your website looks like now using the default Menu Builder markup:
 
My Webiste Before