Increasing the width of the top menu


I have set a background to my top navigation bar to better see the words on top of the cover picture. But the menu is set more to the right side and the back ground only spans to about 75% of the page? How can I make the background span across the entire top of the page with about 20px of padding or so, and have the navigation words centered?

My site is

Also, is it possible to have the jumbotron image scroll through multiple photos? Or is it only static with one?

Thank you,

Heres a picture of the current header. I want to keep the same padding as the right side but have the background span across the rest of the screen.

Hi @example99078,

You could achieve what you want just with an extensive work from a developer. If you want we could recommend you one.



Thank you for the suggestion! With your previous great help, continuing to use inspect element, and a lot of trial and error, I have been able to customize my site to almost exactly where I want it. The last aspect I want to change is to have the top menu span across the entire page, and doing this correctly seems to be a bit more complicated than what reading forums and playing on inspect element can figure out. I have tried coding such as:

.top-header .header-navigation {
width: 100%;
and increasing the width using pixels, but have not had success.

If you can help me out with this issue I would appreciate it very much and can continue to customize the site with everything else I have learned.

Thank you!

Hi @example99078,

First, make sure that you have a child theme install, otherwise on future theme update you will lose all your changes

You need to edit the following file:

  • line 62 from <div class=“container”> to <div class=“container_fluid”>

  • line 77 from <div class=“col-sm-8 col-xs-4”> to <div class=“col-sm-12 col-xs-4”>

After you did those changes the navigation bar should have a full width. You need then to add more menu items to span all across the screen, if you don’t it will not span.