Hello Esther,
The menu bar was designed that way. I can assist you on bringing it over the top and having it stretch end-to-end if that is what you want.
This requires some coding which I am going to assist you with.
Open your index.php file and copy the following block right bellow the opening <body> tag.
<div id="menuOuterWrapper">
<div id="menuWrapper">
<div id="menuToggler"><?php echo JText::_('MENU'); ?></div>
<div id="menu">
<?php if($this->countModules('nuMagazine_menu')): ?>
<jdoc:include type="modules" name="nuMagazine_menu" style="nu" />
<div class="clr"></div>
<?php endif; ?>
</div>
</div>
</div>
The rest is css. In your custom.css file paste this block.
#menuOuterWrapper { left: 0; min-width: 100%; height: auto; }
#menuWrapper { margin: 0 auto; max-width: 1500px; }
#menu ul li a { width: auto; padding: 10px 20px 8px; }
#menu ul li a:hover { width: auto; }
@media only screen and (max-width: 569px),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width : 569px),
only screen and (-o-min-device-pixel-ratio: 3/2) and (max-width : 569px),
only screen and (min-device-pixel-ratio: 1.5) and (max-width : 569px) {
#menuToggler { text-align: left; }
}
