How keep navigation at the top, centered on page

I am working on the following site:

http://bradbartelt.com/stromberg/

When I scroll down the navigation gets to the top of the page and then goes left. I would like it to stay at the top but centered.

All help is appreciated. Thank you.
dgarofaloAsked:
Who is Participating?
 
Edwin HofferTechnical ExpertCommented:
Add this code on page:

<div class="section-w section-base" id="topbar">
    <div class="section row-sm">
      <div class="row-block pull-right">
     <ul id="menu-main-menu" class="menu"><li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-49 current_page_item menu-item-59"><a href="http://bradbartelt.com/stromberg/">About Us</a></li>
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://bradbartelt.com/stromberg/gallery/">Gallery</a></li>
<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://bradbartelt.com/stromberg/products-and-services/">Products &#038; Services</a></li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://bradbartelt.com/stromberg/specials-promotions/">Specials &#038; Promotions</a></li>
<li id="menu-item-294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-294"><a href="http://bradbartelt.com/stromberg/contact-us/">Contact Us</a></li>
</ul></div><div id="so-mobilenav-mobile-1" data-id="1" class="so-mobilenav-mobile"></div><div class="menu-mobilenav-container"><ul id="mobile-nav-item-wrap-1" class="menu"><li><a href="#" class="mobilenav-main-link" data-id="1"><span class="mobile-nav-icon"></span>Menu</a></li></ul>
      </div>
    </div>
  </div>

and add this in css

#topbar {
      display:none;
      position:fixed;
      top:0;
      width:100%;
}
#topbar-custom {
      
      position:fixed;
      top:0;
      width:100%;
}
a.gotoTop {
      position: fixed;
      z-index: 1200;
      right: 0px;
      bottom: 65px;
      width: 30px;
      color: #FFF;
      background-color: #666;
      padding: 2px 10px 5px 10px;
      display: none;
}
a.gotoTop:hover {
      text-decoration: none;
}
.fluid-width-video-wrapper {
    padding: 0;
    position: relative;
    width: 100%;
}
0
 
dgarofaloAuthor Commented:
Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.