Your header is comprised of two spans which define their own width (at desktop view):
<div class="container">
<div class="row">
<div class="span3"> <!-- I have a width of 270px at desktop view -->
<div id="logo">
<!-- your logo here is constrained to the parent span width of 270px -->
</div>
</div>
<div class="span9"> <!-- I have a width of 870px at desktop view -->
<nav id="mainmenu">
<!-- your menu here is constrained to the parent span width of 870px -->
</nav>
</div>
</div>
</div>
You need to edit these spans accordingly and there’s a couple of ways to do this:
-
Your theme may provide you options in the backend dashboard that allow you to specify/modify the width of your logo area.
-
If not, you should override the theme template file that contains the header markup above in a child theme (recommended).
I would start looking at your header.php
in your parent theme directory nova-lite
to see whether it contains the above markup. If not, it may be included in another template file.
Once found, override it in a child theme and modify the spans to something more generous for the logo, like span5
and span7
for the menu. You have a total of 12 columns to work with, so divide them as you see fit.
Your theme is also using an old version of Bootstrap, version 2.3.2 for which documentation can be found here: http://getbootstrap.com/2.3.2/